@zyncat/ui 0.10.0 → 0.12.0

package/dist/{time-field.d.ts → types/components/composites/date-picker/TimeField.d.ts}

@@ -1,10 +1,6 @@
-import * as react from 'react';
-import { D as DateFieldBaseProps } from './field-shell-Cuda-feL.js';
-import './timing-7JA_zQHP.js';
-import './motion-scale-Canq4stZ.js';
-import './dom-props-C0jrllBw.js';
-
-interface TimeFieldProps extends DateFieldBaseProps {
+import './date-picker.css';
+import { type DateFieldBaseProps } from './field-shell';
+export interface TimeFieldProps extends DateFieldBaseProps {
     /** Controlled value, canonical 'HH:mm' (24h). */
     value?: string | null;
     /** Uncontrolled initial value, 'HH:mm' (24h). Use instead of `value`. @default null */
@@ -22,7 +18,5 @@ interface TimeFieldProps extends DateFieldBaseProps {
     /** Upper bound 'HH:mm' - saturates, never errors. */
     max?: string;
 }
-declare function TimeField({ value, // controlled: 'HH:mm' | null
-defaultValue, onChange, label, format, minuteStep, min, max, required, invalid, message, disabled, className, htmlProps, }: TimeFieldProps): react.JSX.Element;
-
-export { TimeField, type TimeFieldProps };
+export declare function TimeField({ value, // controlled: 'HH:mm' | null
+defaultValue, onChange, label, format, minuteStep, min, max, required, invalid, message, disabled, className, htmlProps, }: TimeFieldProps): import("react").JSX.Element;

package/dist/types/components/composites/date-picker/calendar-panel.d.ts

@@ -0,0 +1,16 @@
+import './date-picker.css';
+import { type ReactNode } from 'react';
+import { type ActivateOn } from '../../internal/utils/activation';
+interface DtpPanelProps {
+    val: string | null;
+    commit: (key: string) => void;
+    close: () => void;
+    min?: string;
+    max?: string;
+    timezone?: string;
+    label?: string;
+    slot?: ReactNode;
+    activateOn?: ActivateOn;
+}
+export declare function DtpPanel({ val, commit, min, max, timezone, label, close, slot, activateOn }: DtpPanelProps): import("react").JSX.Element;
+export {};

package/dist/types/components/composites/date-picker/date-utils.d.ts

@@ -0,0 +1,12 @@
+export declare const MONTHS: string[];
+export declare const DOW: string[];
+export declare const pad: (n: number) => string;
+export declare const toKey: (d: Date) => string;
+export declare function parse(k: string): Date;
+export declare const today: () => string;
+export declare const add: (k: string, days: number) => string;
+export declare const col: (d: Date) => number;
+export declare const within: (k: string, min?: string, max?: string) => boolean;
+export declare function displayDay(k: string | null): string | null;
+export declare function grid(y: number, m: number): Date[];
+export declare function tzLabel(tz: string, dateKey?: string): string;

package/dist/types/components/composites/date-picker/field-shell.d.ts

@@ -0,0 +1,46 @@
+import './date-picker.css';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { type IconName } from '../../internal/icon/Icon';
+import type { ActivateOn } from '../../internal/utils/activation';
+export interface DateFieldBaseProps {
+    /** Field label rendered above the trigger. */
+    label?: string;
+    /** Asterisk on the label. @default false */
+    required?: boolean;
+    /** Danger border + message color (.fld is-error). @default false */
+    invalid?: boolean;
+    /** Helper / error text under the field. */
+    message?: string;
+    /** Disable the field. @default false */
+    disabled?: boolean;
+    /** Extra class on the field shell root. */
+    className?: string;
+    /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the field shell root. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Whether the trigger, the day cells and the panel controls fire on `pointerdown` (snappier) or
+     *  wait for `click`. (Not used by TimeField, which is inline.) @default 'pointerdown' */
+    activateOn?: ActivateOn;
+    /** Popover open/close timing - motion tokens only, or `null` to disable. (Not used by TimeField, which is inline.) */
+    animation?: DisableableAnimation;
+}
+export interface FieldShellProps {
+    variant: string;
+    label?: string;
+    required?: boolean;
+    invalid?: boolean;
+    message?: ReactNode;
+    icon: IconName;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    children?: ReactNode;
+}
+export declare function FieldShell({ variant, label, required, invalid, message, icon, className, htmlProps, children, }: FieldShellProps): import("react").JSX.Element;
+export declare function FieldTrigger({ display, placeholder, disabled, ...rest }: {
+    display: string | null;
+    placeholder: string;
+    disabled?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+}): import("react").JSX.Element;

package/dist/types/components/composites/date-picker/range-panel.d.ts

@@ -0,0 +1,24 @@
+import './date-picker.css';
+import { type ActivateOn } from '../../internal/utils/activation';
+/** A date range as wall-clock 'YYYY-MM-DD' endpoints, inclusive. */
+export interface DateRange {
+    /** Range start, inclusive - `'YYYY-MM-DD'`. */
+    start: string;
+    /** Range end, inclusive - `'YYYY-MM-DD'`. Never before `start`. */
+    end: string;
+}
+export declare function drpRangeText(start: string, end: string): string;
+interface DrpPanelProps {
+    value: DateRange | null;
+    commit: (value: DateRange) => void;
+    close: () => void;
+    min?: string;
+    max?: string;
+    timezone?: string;
+    label?: string;
+    months: number;
+    layout: 'popover' | 'sheet';
+    activateOn?: ActivateOn;
+}
+export declare function DrpPanel({ value, commit, close, min, max, timezone, label, months, layout, activateOn, }: DrpPanelProps): import("react").JSX.Element;
+export {};

package/dist/types/components/composites/date-picker/time-core.d.ts

@@ -0,0 +1,14 @@
+import './date-picker.css';
+export interface TimeSegmentsProps {
+    value?: string | null;
+    onCommit?: (value: string) => void;
+    format?: '24h' | '12h';
+    minuteStep?: number;
+    min?: string | null;
+    max?: string | null;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const disp12: (h24: number) => number;
+export declare function TimeSegments({ value, onCommit, format, minuteStep, min, max, disabled, ariaLabel, className, }: TimeSegmentsProps): import("react").JSX.Element;

package/dist/types/components/composites/date-picker/use-day-focus.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useDayFocus(daysRef: RefObject<HTMLDivElement | null>, focusKey: string, viewDep?: number, seedSelector?: string): () => void;

package/dist/{dialog.d.ts → types/components/composites/dialog/Dialog.d.ts}

@@ -1,18 +1,19 @@
-import * as react from 'react';
-import { ReactElement, ReactNode, HTMLAttributes } from 'react';
-import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-import './motion-scale-Canq4stZ.js';
-
-interface DialogProps {
+import './dialog.css';
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import type { ActivateOn } from '../../internal/utils/activation';
+export interface DialogProps {
     /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */
     open?: boolean;
     /** Initial open state when uncontrolled. @default false */
     defaultOpen?: boolean;
     /** Fires whenever the open state changes. Pair with `open` for controlled use. */
     onOpenChange?: (open: boolean) => void;
-    /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */
+    /** Optional element cloned to open the dialog (uncontrolled ergonomics). */
     trigger?: ReactElement | null;
+    /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+    activateOn?: ActivateOn;
     /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */
     title?: ReactNode;
     /** Subtext under the title - wired to `aria-describedby`. @default null */
@@ -40,6 +41,4 @@ interface DialogProps {
     /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
     animation?: DisableableAnimation;
 }
-declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, container, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
-
-export { Dialog, type DialogProps };
+export declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, activateOn, title, description, size, tone, icon, dismissible, container, footer, children, id, htmlProps, animation, }: DialogProps): import("react").JSX.Element;

package/dist/types/components/composites/dropdown/Dropdown.d.ts

@@ -0,0 +1,37 @@
+import './dropdown.css';
+import { type HTMLAttributes, type ReactElement } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import type { ActivateOn } from '../../internal/utils/activation';
+import { type DropdownItem, type DropdownItems } from './types';
+export type { DropdownItem, DropdownGroup } from './types';
+export interface DropdownProps {
+    /** The rows - a flat `DropdownItem[]`, or `DropdownGroup[]` to render divided sections.
+     *  A row with its own `items` opens a submenu instead of committing. @default [] */
+    items: DropdownItems;
+    /** Cloned to toggle the menu, and used as the anchor. Gets the `aria-haspopup="menu"` wiring. */
+    trigger: ReactElement;
+    /** Whether the trigger and the rows fire on `pointerdown` (snappier) or wait for `click`. @default 'pointerdown' */
+    activateOn?: ActivateOn;
+    /** Controlled open state. Omit to stay uncontrolled. */
+    open?: boolean;
+    /** Initial state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+    onOpenChange?: (open: boolean) => void;
+    /** Fires when a row commits - gets its `id` and the full item. Committing closes every level. */
+    onSelect?: (id: string, item: DropdownItem) => void;
+    /** Preferred side of the trigger; flips to the opposite side when cramped. @default 'bottom' */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Cross-axis alignment against the trigger. Submenus always align to their row. @default 'start' */
+    align?: 'start' | 'center' | 'end';
+    /** Base id for the menu and its rows; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+    id?: string;
+    /** Accessible name for the menu - supply when the trigger's own label does not describe it. */
+    ariaLabel?: string;
+    /** Standard attributes (className, style, data-*, ...) forwarded to the top-level menu panel. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Open/close timing - motion tokens only, or `null` to disable. @default open 'base'/'entrance', close 'fast'/'exit' */
+    animation?: DisableableAnimation;
+}
+export declare function Dropdown({ items, trigger, activateOn, open: controlledOpen, defaultOpen, onOpenChange, onSelect, side, align, id, ariaLabel, htmlProps, animation, }: DropdownProps): import("react").JSX.Element;

package/dist/types/components/composites/dropdown/menu-panel.d.ts

@@ -0,0 +1,7 @@
+import '../../internal/menu/menu-surface.css';
+import { type MotionSpecs } from '../../../motion/use-motion';
+import { type MenuChain } from './types';
+export declare function MenuPanel({ chain, depth, ...motion }: {
+    chain: MenuChain;
+    depth: number;
+} & MotionSpecs): import("react").JSX.Element;

package/dist/types/components/composites/dropdown/types.d.ts

@@ -0,0 +1,71 @@
+import type { HTMLAttributes, ReactNode, RefObject } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { type NormalizedGroup } from '../../internal/collection/collection';
+import type { ActivateOn } from '../../internal/utils/activation';
+export interface DropdownItem {
+    /** Unique id - what `onSelect` receives, and what identifies this row's open submenu. */
+    id: string;
+    /** Primary row text. */
+    label: ReactNode;
+    /** Optional secondary line under the label. */
+    description?: string;
+    /** Your own icon node shown before the label. */
+    icon?: ReactNode;
+    /** Keyboard hint shown at the trailing edge, mono. Display only - you still bind the key. */
+    shortcut?: string;
+    /** Destructive action - the row reads in the danger hue. @default false */
+    danger?: boolean;
+    /** Not selectable - skipped by arrow keys and typeahead, and marked `aria-disabled`. @default false */
+    disabled?: boolean;
+    /** Nested menu. The row opens it instead of committing, and can nest again without limit. */
+    items?: DropdownItem[] | DropdownGroup[];
+    /** Text used for typeahead. Required when `label` is not a string. */
+    searchText?: string;
+    /** Fires when this row commits, before the menu's own `onSelect`. */
+    onSelect?: () => void;
+}
+export interface DropdownGroup {
+    /** Section heading rendered above the rows; omit for an unlabeled but still divided group. */
+    label?: string;
+    /** The rows in this section. */
+    items: DropdownItem[];
+}
+export type DropdownItems = DropdownItem[] | DropdownGroup[];
+export declare const normalize: (source: DropdownItems) => {
+    groups: NormalizedGroup<DropdownItem>[];
+    flat: DropdownItem[];
+};
+export declare const itemText: (item: DropdownItem) => string;
+export declare const submenuOf: (item: DropdownItem) => DropdownItems | null;
+export declare const ROOT_LEVEL = "root";
+export declare const levelKey: (depth: number, ownerId: string) => string;
+export interface Level {
+    key: string;
+    items: DropdownItems;
+    owner: DropdownItem | null;
+    ownerIdx: number;
+}
+export declare function resolveLevels(items: DropdownItems, path: string[]): Level[];
+export type SeedFocus = 'first' | 'last' | 'none';
+export interface MenuChain {
+    levels: Level[];
+    menuId: string;
+    activateOn?: ActivateOn;
+    side: 'top' | 'bottom' | 'left' | 'right';
+    align: 'start' | 'center' | 'end';
+    ariaLabel?: string;
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    seed: {
+        key: string;
+        focus: SeedFocus;
+    };
+    hoverDepth: {
+        current: number;
+    };
+    refFor: (key: string) => RefObject<HTMLElement>;
+    openSub: (depth: number, item: DropdownItem, focus: SeedFocus) => void;
+    closeSub: (depth: number) => void;
+    cancel: (depth: number) => void;
+    dismiss: (returnFocus: boolean) => void;
+    select: (item: DropdownItem) => void;
+}

package/dist/types/components/composites/emoji-picker/EmojiPickerPanel.d.ts

@@ -0,0 +1,45 @@
+import './styles.css';
+import { type ReactElement, type Ref } from 'react';
+import type { ActivateOn } from '../../internal/utils/activation';
+import { type PopoverProps } from '../popover/Popover';
+import { type SheetProps } from '../sheet/Sheet';
+import { type EmojiPickerStore } from './react/useEmojiPicker';
+import type { GetEmojiUrl } from './types';
+export { loadEmojiData, onEmojiDataLoaded, type EmojiData, type Emoji } from './data';
+export { getEmojiUrl } from './getEmojiUrl';
+export type { GetEmojiUrl, EmojiUrlSource } from './types';
+export declare const SHEET_BREAKPOINT = "(max-width: 40rem)";
+type Forwarded = 'open' | 'onOpenChange' | 'trigger' | 'children' | 'htmlProps';
+export type EmojiPickerHandle = Pick<EmojiPickerStore, 'renderAll' | 'renderFiltered' | 'handleKey' | 'selectFocused'>;
+export interface EmojiPickerPanelProps {
+    /** Controlled open state - the panel has no uncontrolled mode. */
+    open: boolean;
+    /** Fires whenever the panel asks to open or close: trigger press, Esc, outside press, sheet drag. */
+    onOpenChange: (open: boolean) => void;
+    /** Fires on pick, with the primary shortcode (`smile`, no colons) and the emoji's hex id. */
+    onSelect: (shortcode: string, hexId: string) => void;
+    /** Builds the image URL for one emoji at one call site. Pass the bundled `getEmojiUrl` to use Twemoji and Noto. */
+    getEmojiUrl: GetEmojiUrl;
+    /** Element that both opens the panel and anchors it, when there is no anchor. */
+    trigger?: ReactElement | null;
+    /** Gap in pixels between a custom `popoverProps.anchor` and the panel. Ignored when the panel anchors to its trigger. */
+    offset?: number;
+    /** Render the panel's own search field. Always on in sheet mode, where the
+     *  sheet traps focus and an outside query can no longer reach the panel. */
+    search?: boolean;
+    /** Drive the results from outside — a `:` chip in a document, your own input. */
+    query?: string;
+    /** Whether the trigger, an emoji and a category fire on `pointerdown` (snappier) or wait for `click`. @default 'click' */
+    activateOn?: ActivateOn;
+    /** Viewport at which the panel becomes a bottom sheet. */
+    breakpoint?: string;
+    /** Desktop placement — `anchor`, `side`, `align`, `arrow`, and every other Popover knob. */
+    popoverProps?: Omit<PopoverProps, Forwarded>;
+    /** Narrow-viewport docking — `container`, `dismissible`, and every other Sheet knob. */
+    sheetProps?: Omit<SheetProps, Forwarded | 'side'>;
+    /** Extra class(es) merged onto the panel frame. */
+    className?: string;
+    /** Imperative handle - drive the grid from your own field: `handleKey`, `selectFocused`, `renderAll`, `renderFiltered`. */
+    ref?: Ref<EmojiPickerHandle>;
+}
+export declare function EmojiPickerPanel({ open, onOpenChange, onSelect, getEmojiUrl, trigger, offset, search, query, activateOn, breakpoint, popoverProps, sheetProps, className, ref, }: EmojiPickerPanelProps): import("react").JSX.Element;

package/dist/types/components/composites/emoji-picker/category-icons.d.ts

@@ -0,0 +1,9 @@
+export declare const CATEGORY_ICONS: Record<string, string>;
+export declare const CATEGORY_ICON_ATTRS: {
+    readonly viewBox: "0 0 24 24";
+    readonly fill: "none";
+    readonly stroke: "currentColor";
+    readonly strokeWidth: 2;
+    readonly strokeLinecap: "round";
+    readonly strokeLinejoin: "round";
+};

package/dist/types/components/composites/emoji-picker/data.d.ts

@@ -0,0 +1,33 @@
+export interface EmojiSkin {
+    unified: string;
+    native: string;
+    tone?: number | number[];
+}
+export interface Emoji {
+    id: string;
+    name: string;
+    unicode: string;
+    tags: string[];
+    skins: EmojiSkin[];
+    group: number;
+    shortcodes: string[];
+}
+export interface EmojiCategory {
+    id: string;
+    icon: string;
+    emojis: string[];
+}
+export interface EmojiData {
+    emojis: Record<string, Emoji>;
+    categories: EmojiCategory[];
+}
+/** Run `cb` once the emoji data is available. Fires immediately if already loaded. */
+export declare function onEmojiDataLoaded(cb: () => void): () => void;
+/**
+ * Load the emoji dataset. Pass a URL to fetch it, or an already-parsed
+ * `EmojiData` object to install it directly. Idempotent — the first call wins.
+ */
+export declare function loadEmojiData(loader: string | EmojiData): Promise<EmojiData>;
+/** Synchronous access — only valid after loadEmojiData() has resolved */
+export declare function getEmojiData(): EmojiData | null;
+export declare function getEmojiArray(): Emoji[];

package/dist/types/components/composites/emoji-picker/dom.d.ts

@@ -0,0 +1,19 @@
+import type { GetEmojiUrl } from './types';
+export declare const COLUMN_COUNT = 8;
+export interface GridSection {
+    key: string;
+    header: HTMLElement;
+    start: number;
+    count: number;
+}
+export declare const el: <K extends keyof HTMLElementTagNameMap>(tag: K, className: string) => HTMLElementTagNameMap[K];
+export declare function createEmojiGrid(scroll: HTMLDivElement, getEmojiUrl: GetEmojiUrl, tileIdPrefix: string): {
+    buttons: HTMLButtonElement[];
+    sections: GridSection[];
+    timers: number[];
+    addCategory: (title: string, key: string, ids: string[]) => void;
+    showEmpty: (message: string) => void;
+    clear: () => void;
+    indexOfKey: (key: string) => number;
+    destroy: () => void;
+};

package/dist/types/components/composites/emoji-picker/getEmojiUrl.d.ts

@@ -0,0 +1,2 @@
+import type { GetEmojiUrl } from './types';
+export declare const getEmojiUrl: GetEmojiUrl;

package/dist/types/components/composites/emoji-picker/navigation.d.ts

@@ -0,0 +1,7 @@
+import { type GridSection } from './dom';
+export declare function createNavigator(buttons: HTMLButtonElement[], sections: GridSection[], onFocus: (button: HTMLButtonElement | null) => void): {
+    setFocus: (next: number, scroll?: boolean) => void;
+    handleKey: (event: KeyboardEvent, onEnter: () => void) => boolean;
+    reset: () => void;
+    getFocusedIdx: () => number;
+};

package/dist/types/components/composites/emoji-picker/picker.d.ts

@@ -0,0 +1,20 @@
+import { type ActivateOn } from '../../internal/utils/activation';
+import type { GetEmojiUrl } from './types';
+export interface EmojiPickerOptions {
+    onSelect: (shortcode: string, id: string) => void;
+    getEmojiUrl: GetEmojiUrl;
+    listboxId: string;
+    getFocusHost?: () => HTMLElement | null;
+    getActivateOn?: () => ActivateOn | undefined;
+    onCategoriesChange?: (keys: string[]) => void;
+    onActiveCategoryChange?: (key: string | null) => void;
+}
+export type EmojiPickerApi = ReturnType<typeof createEmojiPicker>;
+export declare function createEmojiPicker(root: HTMLElement, options: EmojiPickerOptions): {
+    renderAll: () => void;
+    renderFiltered: (query: string) => void;
+    scrollToCategory: (key: string) => void;
+    handleKey: (event: KeyboardEvent) => boolean;
+    selectFocused: () => void;
+    destroy: () => void;
+};

package/dist/types/components/composites/emoji-picker/react/category-bar.d.ts

@@ -0,0 +1,6 @@
+import { type ActivateOn } from '../../../internal/utils/activation';
+import { type EmojiPickerStore } from './useEmojiPicker';
+export declare function CategoryBar({ store, activateOn }: {
+    store: EmojiPickerStore;
+    activateOn?: ActivateOn;
+}): import("react").JSX.Element;

package/dist/types/components/composites/emoji-picker/react/useEmojiPicker.d.ts

@@ -0,0 +1,50 @@
+import type { ActivateOn } from '../../../internal/utils/activation';
+import type { GetEmojiUrl } from '../types';
+export interface UseEmojiPickerOptions {
+    onSelect: (shortcode: string, hexId: string) => void;
+    getEmojiUrl: GetEmojiUrl;
+    /** Drive the results from outside — a `:` chip in a document, your own input. */
+    query?: string;
+    /** Whether picking an emoji fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+    activateOn?: ActivateOn;
+}
+export type EmojiPickerStore = ReturnType<typeof createEmojiPickerStore>;
+type Handlers = Pick<UseEmojiPickerOptions, 'onSelect' | 'getEmojiUrl' | 'activateOn'>;
+export declare function createEmojiPickerStore(listboxId: string, handlers: Handlers): {
+    /** Spread onto the field that drives the picker: combobox roles, already pointing at the grid. */
+    searchProps: {
+        readonly role: "combobox";
+        readonly 'aria-expanded': true;
+        readonly 'aria-autocomplete': "list";
+        readonly 'aria-controls': string;
+    };
+    /** Callback ref for the element the picker takes over. The grid is built the moment the node
+     *  arrives, which for a popover is a commit or two after the hook first ran. */
+    mount: (node: HTMLDivElement | null) => void;
+    /** Callback ref for the field that keeps focus while the grid is navigated, or anything wrapping it.
+     *  The picker moves `aria-activedescendant` on it directly, so running the marker down 1900 tiles
+     *  never costs a render. */
+    searchRef: (node: HTMLElement | null) => void;
+    setHandlers: (next: Handlers) => void;
+    subscribe: (listener: () => void) => () => void;
+    getCategories: () => string[];
+    isActive: (key: string) => boolean;
+    render: (next?: string) => void;
+    scrollToCategory: (key: string) => void;
+    /** Redraw the full category grid, dropping whatever query was showing. */
+    renderAll: () => void;
+    /** Redraw the grid as the ranked results for `next`, with the first hit already marked. */
+    renderFiltered: (next: string) => void;
+    /** Feed a key event from your own field into the grid - arrows move, Enter picks.
+     *  Returns true when the grid consumed the key, so you can leave the rest to your input. */
+    handleKey: (event: KeyboardEvent) => boolean;
+    /** Commit the tile the marker is on, exactly as a click on it would. */
+    selectFocused: () => void;
+};
+export declare function useEmojiPicker({ onSelect, getEmojiUrl, query, activateOn }: UseEmojiPickerOptions): EmojiPickerStore;
+/** Category keys the grid currently holds; empty while showing search results. */
+export declare const useCategories: (store: EmojiPickerStore) => string[];
+/** Whether the scroll position is inside this category. Subscribing per key means a scrollspy
+ *  tick re-renders the two rows whose state flipped, not the panel. */
+export declare const useIsActiveCategory: (store: EmojiPickerStore, key: string) => boolean;
+export {};

package/dist/types/components/composites/emoji-picker/scaffold.d.ts

@@ -0,0 +1,8 @@
+import type { EmojiData } from './data';
+import type { GetEmojiUrl } from './types';
+export declare function createScaffold(root: HTMLElement, emojiData: EmojiData, getEmojiUrl: GetEmojiUrl, listboxId: string): {
+    scroll: HTMLDivElement;
+    setCaption: (btn: HTMLButtonElement | null) => void;
+    positionMarker: (btn: HTMLButtonElement | null) => void;
+    mountMarker: () => void;
+};

package/dist/types/components/composites/emoji-picker/search.d.ts

@@ -0,0 +1 @@
+export declare const getRankedEmojiIds: (query: string) => string[];

package/dist/types/components/composites/emoji-picker/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Where the emoji is being rendered. It's metadata for
+ * {@link GetEmojiUrl} — consumers can vary provider, size, or format per
+ * context, or ignore it entirely.
+ *
+ * - `"inline"`       — inline within editor text (small)
+ * - `"picker-grid"`  — main grid in the picker panel (medium)
+ * - `"category-bar"` — category tab icons (small, often animated)
+ * - `"callout-icon"` — callout block leading icon (medium)
+ */
+export type EmojiUrlSource = 'inline' | 'picker-grid' | 'category-bar' | 'callout-icon';
+/** Returns a URL for an emoji image. */
+export type GetEmojiUrl = (hexId: string, source: EmojiUrlSource) => string;

package/dist/{modal.d.ts → types/components/composites/modal/Modal.d.ts}

@@ -1,18 +1,19 @@
-import * as react from 'react';
-import { ReactElement, HTMLAttributes, ReactNode } from 'react';
-import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-import './motion-scale-Canq4stZ.js';
-
-interface ModalProps {
+import './modal.css';
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import type { ActivateOn } from '../../internal/utils/activation';
+export interface ModalProps {
     /** Controlled open state. Omit to stay uncontrolled. */
     open?: boolean;
     /** Initial state when uncontrolled. Default false. */
     defaultOpen?: boolean;
     /** Fires whenever the open state changes. Pair with `open` for controlled use. */
     onOpenChange?: (open: boolean) => void;
-    /** Cloned to open the modal on click. */
+    /** Cloned to open the modal. */
     trigger?: ReactElement | null;
+    /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+    activateOn?: ActivateOn;
     /** Scrim/Esc dismissal. Default true. */
     dismissible?: boolean;
     /** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
@@ -30,6 +31,4 @@ interface ModalProps {
     /** The ENTIRE surface - paint AND semantics (`role="dialog"`, a label). Nothing is painted for you. */
     children: ReactNode;
 }
-declare function Modal({ open: controlledOpen, defaultOpen, onOpenChange, trigger, dismissible, container, id, htmlProps, layerProps, animation, children, }: ModalProps): react.JSX.Element;
-
-export { Modal, type ModalProps };
+export declare function Modal({ open: controlledOpen, defaultOpen, onOpenChange, trigger, activateOn, dismissible, container, id, htmlProps, layerProps, animation, children, }: ModalProps): import("react").JSX.Element;

package/dist/{pagination.d.ts → types/components/composites/pagination/Pagination.d.ts}

@@ -1,8 +1,7 @@
-import * as react from 'react';
-import { HTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
-interface PaginationProps {
+import './pagination.css';
+import { type HTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+export interface PaginationProps {
     /** Accessible name for the nav landmark - name the list ("Posts"), not "pagination". @default 'Pagination' */
     ariaLabel?: string;
     /** Items currently shown, 1-based inclusive: `[from, to]` (e.g. `[26, 50]`). */
@@ -24,6 +23,4 @@ interface PaginationProps {
     /** Standard <nav> attributes (style, data-*, aria-*, ...) forwarded to the root. */
     htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;
 }
-declare function Pagination({ ariaLabel, range, total, hasPrev, hasNext, onPrev, onNext, loading, className, htmlProps, }: PaginationProps): react.JSX.Element;
-
-export { Pagination, type PaginationProps };
+export declare function Pagination({ ariaLabel, range, total, hasPrev, hasNext, onPrev, onNext, loading, className, htmlProps, }: PaginationProps): import("react").JSX.Element;

package/dist/{popover.d.ts → types/components/composites/popover/Popover.d.ts}

@@ -1,14 +1,11 @@
-import * as react from 'react';
-import { ReactElement, HTMLAttributes, ReactNode } from 'react';
-import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-import './motion-scale-Canq4stZ.js';
-
-interface VirtualAnchor {
-    getBoundingClientRect(): DOMRect;
-}
-
-interface PopoverProps {
+import './popover.css';
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { type VirtualAnchor } from '../../internal/overlay/position';
+import type { ActivateOn } from '../../internal/utils/activation';
+export type { VirtualAnchor };
+export interface PopoverProps {
     /** Controlled open state. Omit to stay uncontrolled. */
     open?: boolean;
     /** Initial state when uncontrolled. Default false. */
@@ -17,6 +14,8 @@ interface PopoverProps {
     onOpenChange?: (open: boolean) => void;
     /** Cloned to toggle the panel, and used as the anchor unless `anchor` is set. */
     trigger?: ReactElement | null;
+    /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+    activateOn?: ActivateOn;
     /** Anchor to an arbitrary rect instead of the trigger - any `{ getBoundingClientRect() }`, which an element also satisfies.
      *  Drive `open` yourself; pass a new object to re-place a moving anchor. */
     anchor?: VirtualAnchor | null;
@@ -37,6 +36,4 @@ interface PopoverProps {
     /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
     children: ReactNode;
 }
-declare function Popover({ open: controlledOpen, defaultOpen, onOpenChange, trigger, anchor, side, align, arrow, dismissible, id, htmlProps, animation, children, }: PopoverProps): react.JSX.Element;
-
-export { Popover, type PopoverProps, type VirtualAnchor };
+export declare function Popover({ open: controlledOpen, defaultOpen, onOpenChange, trigger, activateOn, anchor, side, align, arrow, dismissible, id, htmlProps, animation, children, }: PopoverProps): import("react").JSX.Element;