@jini-ai/ui-kit 0.0.0-stage → 0.1.1

package/dist/react/native/Controls.hooks.d.ts

@@ -0,0 +1,164 @@
+import type { ChangeEvent } from 'react';
+import type { ButtonProps, IconButtonProps, TextFieldProps, TextAreaProps, SelectProps, CheckboxProps, ToastProps, NoticeProps, SpinnerProps, BadgeProps } from '../types.js';
+export declare function useNativeButton(required: ButtonProps, _optional?: Record<string, never>): {
+    children: import("react").ReactNode;
+    props: {
+        id?: string;
+        'data-jini-part': string;
+        ref: import("react").Ref<HTMLButtonElement> | undefined;
+        className: string;
+        type: "button" | "submit" | "reset";
+        disabled: boolean;
+        'aria-busy': boolean | undefined;
+        'data-jini-variant': "warning" | "danger" | "primary" | "secondary" | "ghost";
+        'data-jini-state': string;
+        onClick: () => void;
+    };
+};
+export declare function useNativeIconButton(required: IconButtonProps, _optional?: Record<string, never>): {
+    props: {
+        id?: string;
+        'data-jini-part': string;
+        'aria-label': string;
+        ref: import("react").Ref<HTMLButtonElement> | undefined;
+        className: string;
+        type: "button" | "submit" | "reset";
+        disabled: boolean;
+        'aria-busy': boolean | undefined;
+        'data-jini-variant': "warning" | "danger" | "primary" | "secondary" | "ghost";
+        'data-jini-state': string;
+        onClick: () => void;
+    };
+    children: import("react").ReactNode;
+};
+export declare function useNativeTextField(required: TextFieldProps, _optional?: Record<string, never>): {
+    props: {
+        id: string;
+        ref: import("react").Ref<HTMLInputElement> | undefined;
+        type: "number" | "text" | "password" | "email" | "search" | "url" | "tel";
+        value: string;
+        placeholder: string | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        className: string;
+        disabled: boolean | undefined;
+        required: boolean | undefined;
+        'data-jini-part'?: string;
+    };
+    id: string;
+    label: string;
+    labelAttrs: {
+        'data-jini-part': string;
+        className: string;
+    };
+};
+export declare function useNativeTextArea(required: TextAreaProps, _optional?: Record<string, never>): {
+    props: {
+        className: string;
+        id: string;
+        ref: import("react").Ref<HTMLTextAreaElement> | undefined;
+        value: string;
+        rows: number;
+        placeholder: string | undefined;
+        onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+        disabled: boolean | undefined;
+        required: boolean | undefined;
+        'data-jini-part'?: string;
+    };
+    id: string;
+    label: string;
+    labelAttrs: {
+        'data-jini-part': string;
+        className: string;
+    };
+};
+export declare function useNativeSelect(required: SelectProps, _optional?: Record<string, never>): {
+    options: import("react").DetailedReactHTMLElement<{
+        className: string;
+        key: string;
+        value: string;
+        disabled: boolean | undefined;
+    }, HTMLElement>[];
+    props: {
+        className: string;
+        id: string;
+        ref: import("react").Ref<HTMLSelectElement> | undefined;
+        value: string;
+        onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+        disabled: boolean | undefined;
+        required: boolean | undefined;
+        'data-jini-part'?: string;
+    };
+    id: string;
+    label: string;
+    labelAttrs: {
+        'data-jini-part': string;
+        className: string;
+    };
+};
+export declare function useNativeCheckbox(required: CheckboxProps, optional?: {
+    role?: 'switch';
+}): {
+    label: string;
+    id: string;
+    props: {
+        id: string;
+        ref: import("react").Ref<HTMLInputElement> | undefined;
+        className: string;
+        type: string;
+        role: "switch" | undefined;
+        checked: boolean;
+        disabled: boolean | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        'data-jini-part'?: string;
+    };
+};
+export declare function useNativeToast(required: ToastProps, _optional?: Record<string, never>): {
+    props: {
+        className: string;
+        role: string;
+        tabIndex: number;
+        'data-jini-variant': "warning" | "danger" | "info" | "success";
+        id?: string;
+        'data-jini-part': string;
+    };
+    message: string;
+    dismiss: import("react").DetailedReactHTMLElement<{
+        type: string;
+        className: string;
+        'data-jini-part': string;
+        'aria-label': string;
+        onClick: () => void | undefined;
+    }, HTMLElement> | null;
+};
+export declare function useNativeNotice(required: NoticeProps, _optional?: Record<string, never>): {
+    children: import("react").ReactNode;
+    props: {
+        className: string;
+        tabIndex: number;
+        role: string;
+        'data-jini-variant': "warning" | "danger" | "info" | "success";
+        id?: string;
+        'data-jini-part': string;
+    };
+};
+export declare function useNativeSpinner(required: SpinnerProps, _optional?: Record<string, never>): {
+    props: {
+        className: string;
+        id?: string;
+        'data-jini-part': string;
+        role: string;
+        'aria-label': string;
+        tabIndex: number;
+    };
+};
+export declare function useNativeBadge(required: BadgeProps, _optional?: Record<string, never>): {
+    children: import("react").ReactNode;
+    props: {
+        className: string;
+        tabIndex: number;
+        'data-jini-variant': "warning" | "danger" | "info" | "success";
+        id?: string;
+        'data-jini-part': string;
+    };
+};
+//# sourceMappingURL=Controls.hooks.d.ts.map

package/dist/react/native/Controls.hooks.js

@@ -0,0 +1,69 @@
+import { createElement, useId } from 'react';
+export function useNativeButton(required, _optional = {}) {
+    return { children: required.children, props: { 'data-jini-part': 'kit.button', ref: required.ref, className: `jini-btn jini-btn-${required.variant ?? 'primary'} ${required.className ?? ''}`.trim(),
+            type: required.type ?? 'button', disabled: !!required.disabled || !!required.pending,
+            'aria-busy': required.pending, 'data-jini-variant': required.variant ?? 'primary',
+            'data-jini-state': required.pending ? 'pending' : required.disabled ? 'disabled' : 'ready',
+            onClick: () => { if (!required.disabled && !required.pending)
+                required.onPress?.({}); },
+            // Opaque metadata wins over generated metadata; behavioral props cannot be supplied through attrs.
+            ...required.attrs } };
+}
+export function useNativeIconButton(required, _optional = {}) {
+    const vm = useNativeButton(required);
+    return { ...vm, props: { ...vm.props, 'data-jini-part': 'kit.icon-button', 'aria-label': required.label, ...required.attrs } };
+}
+function useField(required) {
+    const generated = useId();
+    return { id: required.attrs?.id ?? generated, label: required.label, labelAttrs: { 'data-jini-part': 'kit.field-label', className: 'jini-field' },
+        props: { ...required.attrs, className: `jini-input ${required.className ?? ''}`.trim(), disabled: required.disabled, required: required.required } };
+}
+export function useNativeTextField(required, _optional = {}) {
+    const vm = useField(required);
+    return { ...vm, props: { ...vm.props, id: vm.id, ref: required.ref, type: required.type ?? 'text', value: required.value,
+            placeholder: required.placeholder, onChange: (event) => {
+                if (!required.disabled)
+                    required.onValueChange({ value: event.currentTarget.value });
+            } } };
+}
+export function useNativeTextArea(required, _optional = {}) {
+    const vm = useField(required);
+    return { ...vm, props: { ...vm.props, className: `jini-textarea ${required.className ?? ''}`.trim(), id: vm.id, ref: required.ref, value: required.value, rows: required.rows ?? 3,
+            placeholder: required.placeholder, onChange: (event) => {
+                if (!required.disabled)
+                    required.onValueChange({ value: event.currentTarget.value });
+            } } };
+}
+export function useNativeSelect(required, _optional = {}) {
+    const vm = useField(required);
+    // Keep a real HTMLSelectElement: the host agent driver can set an option without library-specific knowledge.
+    const options = required.options.map(option => createElement('option', { className: 'jini-select-option', key: option.value, value: option.value, disabled: option.disabled }, option.label));
+    return { ...vm, options, props: { ...vm.props, className: `jini-select ${required.className ?? ''}`.trim(), id: vm.id, ref: required.ref, value: required.value,
+            onChange: (event) => { if (!required.disabled)
+                required.onValueChange({ value: event.currentTarget.value }); } } };
+}
+export function useNativeCheckbox(required, optional = {}) {
+    const generated = useId();
+    return { label: required.label, id: required.attrs?.id ?? generated,
+        props: { ...required.attrs, id: required.attrs?.id ?? generated, ref: required.ref, className: `jini-checkbox ${required.className ?? ''}`.trim(),
+            type: 'checkbox', role: optional.role, checked: required.checked, disabled: required.disabled,
+            onChange: (event) => { if (!required.disabled)
+                required.onCheckedChange({ checked: event.currentTarget.checked }); } } };
+}
+export function useNativeToast(required, _optional = {}) {
+    return { props: { 'data-jini-part': 'kit.toast', ...required.attrs, className: `jini-toast ${required.className ?? ''}`.trim(),
+            role: required.tone === 'danger' ? 'alert' : 'status', tabIndex: -1, 'data-jini-variant': required.tone ?? 'info' },
+        message: required.message, dismiss: required.onDismiss ? createElement('button', { type: 'button', className: 'jini-btn jini-btn-ghost jini-toast-dismiss', 'data-jini-part': 'kit.toast-dismiss',
+            'aria-label': required.dismissLabel ?? 'Dismiss notification', onClick: () => required.onDismiss?.({}) }, '×') : null };
+}
+export function useNativeNotice(required, _optional = {}) {
+    return { children: required.children, props: { 'data-jini-part': 'kit.notice', ...required.attrs, className: `jini-notice jini-notice-${required.tone === 'danger' ? 'error' : required.tone ?? 'info'} ${required.className ?? ''}`.trim(), tabIndex: -1,
+            role: required.tone === 'danger' ? 'alert' : 'status', 'data-jini-variant': required.tone ?? 'info' } };
+}
+export function useNativeSpinner(required, _optional = {}) {
+    return { props: { 'data-jini-part': 'kit.spinner', role: 'status', 'aria-label': required.label ?? 'Loading', tabIndex: -1, ...required.attrs, className: `jini-spinner ${required.className ?? ''}`.trim() } };
+}
+export function useNativeBadge(required, _optional = {}) {
+    return { children: required.children, props: { 'data-jini-part': 'kit.badge', ...required.attrs, className: `jini-pill jini-pill-${required.tone ?? 'info'} ${required.className ?? ''}`.trim(), tabIndex: -1, 'data-jini-variant': required.tone ?? 'info' } };
+}
+//# sourceMappingURL=Controls.hooks.js.map

package/dist/react/native/Controls.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useNativeButton, useNativeIconButton, useNativeTextField, useNativeTextArea, useNativeSelect, useNativeCheckbox, useNativeToast, useNativeNotice, useNativeSpinner, useNativeBadge } from './Controls.hooks.js';
+// React's forwardRef callback is the framework-mandated positional exception; exported factories use two objects.
+export const NativeButton = forwardRef(function NativeButton(props, ref) {
+    const vm = useNativeButton({ ...props, ref });
+    return _jsx("button", { ...vm.props, children: vm.children });
+});
+export const NativeIconButton = forwardRef(function NativeIconButton(props, ref) {
+    const vm = useNativeIconButton({ ...props, ref });
+    return _jsx("button", { ...vm.props, children: vm.children });
+});
+export const NativeTextField = forwardRef(function NativeTextField(props, ref) {
+    const vm = useNativeTextField({ ...props, ref });
+    return _jsxs("label", { htmlFor: vm.id, ...vm.labelAttrs, children: [_jsx("span", { className: "jini-field-label", children: vm.label }), _jsx("input", { ...vm.props })] });
+});
+export const NativeTextArea = forwardRef(function NativeTextArea(props, ref) {
+    const vm = useNativeTextArea({ ...props, ref });
+    return _jsxs("label", { htmlFor: vm.id, ...vm.labelAttrs, children: [_jsx("span", { className: "jini-field-label", children: vm.label }), _jsx("textarea", { ...vm.props })] });
+});
+export const NativeSelect = forwardRef(function NativeSelect(props, ref) {
+    const vm = useNativeSelect({ ...props, ref });
+    return _jsxs("label", { htmlFor: vm.id, ...vm.labelAttrs, children: [_jsx("span", { className: "jini-field-label", children: vm.label }), _jsx("select", { ...vm.props, children: vm.options })] });
+});
+export const NativeCheckbox = forwardRef(function NativeCheckbox(props, ref) {
+    const vm = useNativeCheckbox({ ...props, ref });
+    return _jsxs("label", { className: "jini-checkbox-field", htmlFor: vm.id, children: [_jsx("input", { ...vm.props }), vm.label] });
+});
+export const NativeSwitch = forwardRef(function NativeSwitch(props, ref) {
+    const vm = useNativeCheckbox({ ...props, ref }, { role: 'switch' });
+    return _jsxs("label", { className: "jini-checkbox-field", htmlFor: vm.id, children: [_jsx("input", { ...vm.props }), vm.label] });
+});
+export function NativeToast(props, _optional = {}) {
+    const vm = useNativeToast(props);
+    return _jsxs("div", { ...vm.props, children: [vm.message, vm.dismiss] });
+}
+export function NativeNotice(props, _optional = {}) {
+    const vm = useNativeNotice(props);
+    return _jsx("div", { ...vm.props, children: vm.children });
+}
+export function NativeSpinner(props, _optional = {}) {
+    const vm = useNativeSpinner(props);
+    return _jsx("span", { ...vm.props, children: "\u25CC" });
+}
+export function NativeBadge(props, _optional = {}) {
+    const vm = useNativeBadge(props);
+    return _jsx("span", { ...vm.props, children: vm.children });
+}
+//# sourceMappingURL=Controls.js.map

package/dist/react/native/Dialog.d.ts

@@ -0,0 +1,4 @@
+import type { DialogProps, ConfirmViewProps } from '../types.js';
+export declare const NativeDialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare function NativeConfirmDialog(props: ConfirmViewProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/react/native/Dialog.hooks.d.ts

@@ -0,0 +1,60 @@
+import type { MouseEvent, SyntheticEvent } from 'react';
+import type { DialogProps, ConfirmViewProps } from '../types.js';
+export declare function useNativeDialog(required: DialogProps, optional?: {
+    initialFocus?: () => void;
+}): {
+    title: string;
+    children: import("react").ReactNode;
+    titleId: string;
+    closeLabel: string;
+    closeProps: {
+        className: string;
+        variant: "secondary";
+        attrs: {
+            'data-jini-part': string;
+        };
+        disabled: boolean;
+        onPress: () => void;
+    };
+    props: {
+        className: string;
+        ref: import("react").RefObject<HTMLDialogElement | null>;
+        tabIndex: number;
+        'aria-busy': boolean | undefined;
+        onCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
+        onClick: (event: MouseEvent<HTMLDialogElement>) => void;
+        id?: string;
+        'data-jini-part': string;
+        'aria-labelledby': string;
+    };
+};
+export declare function useNativeConfirm(required: ConfirmViewProps, _optional?: Record<string, never>): {
+    controller: import("../types.js").ConfirmController;
+    Button: import("react").ForwardRefExoticComponent<Omit<import("../types.js").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    props: {
+        className: string;
+        role: string;
+        id?: string;
+        'data-jini-part': string;
+        'aria-labelledby': string;
+        ref: import("react").RefObject<HTMLDialogElement | null>;
+        tabIndex: number;
+        'aria-busy': boolean | undefined;
+        onCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
+        onClick: (event: MouseEvent<HTMLDialogElement>) => void;
+    };
+    title: string;
+    children: import("react").ReactNode;
+    titleId: string;
+    closeLabel: string;
+    closeProps: {
+        className: string;
+        variant: "secondary";
+        attrs: {
+            'data-jini-part': string;
+        };
+        disabled: boolean;
+        onPress: () => void;
+    };
+};
+//# sourceMappingURL=Dialog.hooks.d.ts.map

package/dist/react/native/Dialog.hooks.js

@@ -0,0 +1,56 @@
+import { useId, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { Button } from '../facade.js';
+import { NativeButton } from './Controls.js';
+export function useNativeDialog(required, optional = {}) {
+    const dialogRef = useRef(null), opener = useRef(null), titleId = useId();
+    useImperativeHandle(required.ref, () => dialogRef.current, []);
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (!required.open) {
+            if (opener.current instanceof HTMLElement && opener.current.isConnected)
+                opener.current.focus({ preventScroll: true });
+            return;
+        }
+        opener.current = document.activeElement;
+        if (typeof dialog.showModal === 'function') {
+            if (!dialog.open)
+                dialog.showModal();
+        }
+        else
+            dialog.setAttribute('open', '');
+        if (optional.initialFocus)
+            optional.initialFocus();
+        else
+            (dialog.querySelector('[data-jini-autofocus]') ?? dialog.querySelector('[data-jini-part="kit.dialog-close"]') ?? dialog).focus({ preventScroll: true });
+        dialog.scrollTop = 0;
+        return () => {
+            if (typeof dialog.close === 'function') {
+                if (dialog.open)
+                    dialog.close();
+            }
+            else
+                dialog.removeAttribute('open');
+            if (opener.current instanceof HTMLElement && opener.current.isConnected)
+                opener.current.focus({ preventScroll: true });
+        };
+        // Open is the transition boundary: editing content must not recapture the original trigger.
+    }, [required.open]);
+    return { title: required.title, children: required.children, titleId, closeLabel: required.closeLabel ?? 'Close',
+        closeProps: { className: 'jini-dialog-close', variant: 'secondary', attrs: { 'data-jini-part': 'kit.dialog-close' }, disabled: !!required.pending, onPress: () => { if (!required.pending)
+                required.onClose({}); } },
+        props: { 'aria-labelledby': titleId, 'data-jini-part': 'kit.dialog', ...required.attrs, className: `jini-dialog ${required.className ?? ''}`.trim(), ref: dialogRef, tabIndex: -1,
+            'aria-busy': required.pending,
+            onCancel: (event) => { event.preventDefault(); if (!required.pending)
+                required.onClose({}); },
+            onClick: (event) => { if (event.target === event.currentTarget && !required.pending)
+                required.onClose({}); } } };
+}
+export function useNativeConfirm(required, _optional = {}) {
+    const c = required.controller;
+    const vm = useNativeDialog({ open: c.open, title: c.title, pending: c.pending, onClose: () => c.requestDismiss({ reason: 'close' }) }, { initialFocus: () => c.focusInitial({}) });
+    return { ...vm, controller: c, Button: c.nativeActions ? NativeButton : Button,
+        props: { ...vm.props, ...c.frameAttrs, className: `jini-dialog jini-confirm-dialog ${c.className ?? ''}`.trim(), role: 'alertdialog' } };
+}
+//# sourceMappingURL=Dialog.hooks.js.map

package/dist/react/native/Dialog.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useNativeDialog, useNativeConfirm } from './Dialog.hooks.js';
+import { Button } from '../facade.js';
+export const NativeDialog = forwardRef(function NativeDialog(props, ref) {
+    const vm = useNativeDialog({ ...props, ref });
+    return _jsxs("dialog", { ...vm.props, children: [_jsx("h2", { className: "jini-dialog-title", id: vm.titleId, "data-jini-part": "kit.dialog-title", children: vm.title }), vm.children, _jsx(Button, { ...vm.closeProps, children: vm.closeLabel })] });
+});
+export function NativeConfirmDialog(props, _optional = {}) {
+    const vm = useNativeConfirm(props);
+    return _jsxs("dialog", { ...vm.props, children: [_jsx("h2", { className: "jini-confirm-dialog-title", ...vm.controller.titleAttrs, children: vm.controller.title }), _jsxs("div", { className: "jini-confirm-dialog-body", "data-jini-part": "confirm.body", children: [vm.controller.body, _jsx("p", { className: "jini-confirm-dialog-consequence", ...vm.controller.consequenceAttrs, children: vm.controller.consequence }), vm.controller.error] }), _jsxs("div", { className: "jini-confirm-dialog-actions", "data-jini-part": "confirm.actions", children: [_jsx(vm.Button, { ...vm.controller.cancel }), _jsx(vm.Button, { ...vm.controller.confirm })] })] });
+}
+//# sourceMappingURL=Dialog.js.map

package/dist/react/native/Navigation.d.ts

@@ -0,0 +1,5 @@
+import type { TabsProps, MenuProps, TooltipProps } from '../types.js';
+export declare function NativeTabs(props: TabsProps, _optional?: Record<string, never>): import("react").JSX.Element;
+export declare function NativeMenu(props: MenuProps, _optional?: Record<string, never>): import("react").JSX.Element;
+export declare function NativeTooltip(props: TooltipProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=Navigation.d.ts.map

package/dist/react/native/Navigation.hooks.d.ts

@@ -0,0 +1,96 @@
+import type { KeyboardEvent } from 'react';
+import type { TabsProps, MenuProps, TooltipProps } from '../types.js';
+export declare function useNativeTabs(required: TabsProps, _optional?: Record<string, never>): {
+    root: import("react").RefObject<HTMLDivElement | null>;
+    className: string;
+    label: string;
+    tabs: import("react").DetailedReactHTMLElement<{
+        'data-tab-id': string;
+        'aria-controls': string;
+        'aria-selected': boolean;
+        disabled: boolean | undefined;
+        tabIndex: number;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+        id: string;
+        'data-jini-part': string;
+        key: string;
+        type: string;
+        role: "tab";
+        className: string;
+    }, HTMLElement>[];
+    panels: import("react").DetailedReactHTMLElement<{
+        key: string;
+        role: "tabpanel";
+        tabIndex: number;
+        'data-jini-part': string;
+        className: string;
+        id: string;
+        'aria-labelledby': string;
+        hidden: boolean;
+    }, HTMLElement>[];
+};
+export declare function useNativeMenu(required: MenuProps, _optional?: Record<string, never>): {
+    label: string;
+    items: import("react").DetailedReactHTMLElement<{
+        className: string;
+        disabled: boolean | undefined;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+        id?: string;
+        'data-jini-part': string;
+        key: string;
+        role: "menuitem";
+        type: string;
+        tabIndex: number;
+    }, HTMLElement>[];
+    popup: import("react").ReactPortal | null;
+    triggerProps: {
+        ref: import("react").RefObject<HTMLButtonElement | null>;
+        type: "button";
+        className: string;
+        disabled: boolean | undefined;
+        'aria-label': string;
+        'aria-haspopup': "menu";
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+        id?: string;
+        'data-jini-part': string;
+    };
+    menuProps: {
+        ref: import("react").RefObject<HTMLDivElement | null>;
+        id: string;
+        role: string;
+        'aria-label': string;
+        hidden: boolean;
+        className: string;
+        'data-jini-part': string;
+    };
+};
+export declare function useNativeTooltip(required: TooltipProps, _optional?: Record<string, never>): {
+    children: import("react").ReactNode;
+    content: import("react").ReactNode;
+    triggerProps: {
+        className: string;
+        tabIndex: number;
+        'aria-label': string | undefined;
+        'aria-describedby': string | undefined;
+        onFocus: () => void;
+        onBlur: () => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => void;
+        id?: string;
+        'data-jini-part': string;
+    };
+    tooltipProps: {
+        id: string;
+        role: string;
+        hidden: boolean;
+        className: string;
+        'data-jini-part': string;
+    };
+};
+//# sourceMappingURL=Navigation.hooks.d.ts.map

package/dist/react/native/Navigation.hooks.js

@@ -0,0 +1,110 @@
+import { createElement, useId, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+export function useNativeTabs(required, _optional = {}) {
+    const prefix = useId(), root = useRef(null);
+    const enabled = required.items.filter(item => !item.disabled);
+    const active = enabled.find(item => item.id === required.value) ?? enabled[0];
+    function onKeyDown(event) {
+        const index = enabled.findIndex(item => item.id === event.currentTarget.dataset.tabId);
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1 :
+            event.key === 'ArrowRight' ? (index + 1) % enabled.length : event.key === 'ArrowLeft' ? (index - 1 + enabled.length) % enabled.length : undefined;
+        if (next === undefined || !enabled[next])
+            return;
+        event.preventDefault();
+        required.onValueChange({ value: enabled[next].id });
+        root.current?.querySelectorAll('[role="tab"]')[required.items.findIndex(item => item.id === enabled[next].id)]?.focus();
+    }
+    const tabs = required.items.map((item, index) => createElement('button', {
+        key: item.id, type: 'button', role: 'tab', id: `${prefix}-tab-${index}`, 'data-jini-part': 'kit.tab', className: 'jini-tab-bar-item',
+        ...item.attrs, ...(item.id === active?.id ? required.attrs : {}),
+        'data-tab-id': item.id, 'aria-controls': `${prefix}-panel-${index}`, 'aria-selected': item.id === active?.id,
+        disabled: item.disabled, tabIndex: item.id === active?.id ? 0 : -1,
+        onClick: () => { if (!item.disabled)
+            required.onValueChange({ value: item.id }); }, onKeyDown,
+    }, item.label));
+    const panels = required.items.map((item, index) => createElement('div', { key: item.id, role: 'tabpanel', tabIndex: 0,
+        'data-jini-part': 'kit.tab-panel', className: 'jini-tab-panel', id: `${prefix}-panel-${index}`, 'aria-labelledby': `${prefix}-tab-${index}`, hidden: item.id !== active?.id }, item.content));
+    return { root, className: `jini-tabs ${required.className ?? ''}`.trim(), label: required.label, tabs, panels };
+}
+export function useNativeMenu(required, _optional = {}) {
+    const [open, setOpen] = useState(false), trigger = useRef(null), menu = useRef(null), id = useId();
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    useLayoutEffect(() => {
+        if (!open || !trigger.current || !menu.current)
+            return;
+        // Portals escape the preview card's overflow clipping. Follow the anchor on scroll/resize.
+        const update = () => {
+            const anchor = trigger.current.getBoundingClientRect();
+            const box = menu.current.getBoundingClientRect();
+            setPosition({ top: anchor.bottom + box.height + 4 > window.innerHeight ? Math.max(4, anchor.top - box.height - 4) : anchor.bottom + 4,
+                left: Math.max(4, Math.min(anchor.right - box.width, window.innerWidth - box.width - 4)) });
+        };
+        update();
+        window.addEventListener('resize', update);
+        window.addEventListener('scroll', update, true);
+        return () => { window.removeEventListener('resize', update); window.removeEventListener('scroll', update, true); };
+    }, [open]);
+    const enabled = required.items.filter(item => !item.disabled);
+    function close() { setOpen(false); trigger.current?.focus(); }
+    function focus(index) { menu.current?.querySelectorAll('[role="menuitem"]:not(:disabled)')[index]?.focus(); }
+    useEffect(() => {
+        if (!open)
+            return;
+        focus(0);
+        const dismiss = (event) => {
+            if (event.target instanceof Node && !menu.current?.contains(event.target) && !trigger.current?.contains(event.target))
+                setOpen(false);
+        };
+        document.addEventListener('pointerdown', dismiss);
+        return () => document.removeEventListener('pointerdown', dismiss);
+    }, [open]);
+    // `current` is the item's position among enabled items, the same order focus() walks, so no DOM lookup is needed.
+    function onKeyDown(event, current) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+            return;
+        }
+        if (event.key === 'Tab') {
+            setOpen(false);
+            return;
+        }
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1 :
+            event.key === 'ArrowDown' ? (current + 1) % enabled.length : event.key === 'ArrowUp' ? (current - 1 + enabled.length) % enabled.length : undefined;
+        if (next !== undefined) {
+            event.preventDefault();
+            focus(next);
+        }
+    }
+    const items = required.items.map(item => createElement('button', { key: item.id, role: 'menuitem', type: 'button', tabIndex: -1,
+        'data-jini-part': 'kit.menu-item', ...item.attrs, className: `jini-row-menu-item ${item.attrs?.['data-jini-variant'] === 'danger' ? 'jini-btn-danger' : ''}`.trim(), disabled: item.disabled,
+        onClick: () => { if (!item.disabled) {
+            close();
+            item.onPress({});
+        } }, onKeyDown: (event) => onKeyDown(event, enabled.indexOf(item)) }, item.label));
+    const menuProps = { ref: menu, id, role: 'menu', 'aria-label': required.label, hidden: !open, className: 'jini-row-menu-popup', 'data-jini-part': 'kit.menu', style: { position: 'fixed', ...position } };
+    return { label: '⋮', items, popup: open ? createPortal(createElement('div', menuProps, items), document.body) : null,
+        triggerProps: { 'data-jini-part': 'kit.menu-trigger', ...required.attrs, ref: trigger, type: 'button',
+            className: `jini-row-menu-trigger ${required.className ?? ''}`.trim(), disabled: required.disabled, 'aria-label': required.label, 'aria-haspopup': 'menu', 'aria-expanded': open, 'aria-controls': id,
+            onClick: () => { if (!required.disabled)
+                setOpen(!open); }, onKeyDown: (event) => {
+                if (!required.disabled && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                    event.preventDefault();
+                    setOpen(true);
+                }
+            } },
+        menuProps: { ref: menu, id, role: 'menu', 'aria-label': required.label, hidden: !open, className: 'jini-row-menu-popup', 'data-jini-part': 'kit.menu' } };
+}
+export function useNativeTooltip(required, _optional = {}) {
+    const [open, setOpen] = useState(false), id = useId();
+    return { children: required.children, content: required.content,
+        triggerProps: { 'data-jini-part': 'kit.tooltip-trigger', ...required.attrs, className: `jini-tooltip-trigger ${required.className ?? ''}`.trim(), tabIndex: 0,
+            'aria-label': required.label, 'aria-describedby': open ? id : undefined,
+            onFocus: () => setOpen(true), onBlur: () => setOpen(false), onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false),
+            onKeyDown: (event) => { if (event.key === 'Escape') {
+                event.preventDefault();
+                setOpen(false);
+            } } },
+        tooltipProps: { id, role: 'tooltip', hidden: !open, className: 'jini-tooltip', 'data-jini-part': 'kit.tooltip' } };
+}
+//# sourceMappingURL=Navigation.hooks.js.map

package/dist/react/native/Navigation.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNativeTabs, useNativeMenu, useNativeTooltip } from './Navigation.hooks.js';
+export function NativeTabs(props, _optional = {}) {
+    const vm = useNativeTabs(props);
+    return _jsxs("div", { ref: vm.root, className: vm.className, children: [_jsx("div", { className: "jini-tab-bar", role: "tablist", "aria-label": vm.label, "data-jini-part": "kit.tabs", children: vm.tabs }), vm.panels] });
+}
+export function NativeMenu(props, _optional = {}) {
+    const vm = useNativeMenu(props);
+    return _jsxs("div", { className: "jini-row-menu", children: [_jsx("button", { ...vm.triggerProps, children: _jsxs("svg", { className: "jini-icon", width: "16", height: "16", viewBox: "0 0 18 18", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { className: "jini-icon-circle", cx: "9", cy: "4.5", r: "1.5" }), _jsx("circle", { className: "jini-icon-circle", cx: "9", cy: "9", r: "1.5" }), _jsx("circle", { className: "jini-icon-circle", cx: "9", cy: "13.5", r: "1.5" })] }) }), vm.popup] });
+}
+export function NativeTooltip(props, _optional = {}) {
+    const vm = useNativeTooltip(props);
+    return _jsxs("span", { className: "jini-tooltip-container", children: [_jsx("span", { ...vm.triggerProps, children: vm.children }), _jsx("span", { ...vm.tooltipProps, children: vm.content })] });
+}
+//# sourceMappingURL=Navigation.js.map