@jfrader/ui 0.4.0 → 0.5.1

package/dist/types/components/toast/toast.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentPropsWithRef, type MouseEvent, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type MouseEvent, type ReactNode, type CSSProperties } from 'react';
 import { type SxProps } from '../../styling/sx';
-export type ToastTone = 'neutral' | 'success' | 'danger';
+export type ToastTone = 'neutral' | 'success' | 'danger' | 'info' | 'warning';
 export interface ToastAction {
     label: string;
     /** Runs on click; the toast then dismisses unless the handler calls `event.preventDefault()`. */
@@ -13,6 +13,8 @@ export interface ToastOptions {
     /** Milliseconds before auto-dismiss; `null` persists until dismissed. Defaults to the provider's. */
     duration?: number | null;
     action?: ToastAction;
+    /** Decorative spinner; an omitted duration persists while loading. */
+    loading?: boolean;
 }
 export interface ToastProviderProps {
     children?: ReactNode;
@@ -28,10 +30,43 @@ export interface ToastViewportProps extends ComponentPropsWithRef<'div'>, SxProp
 export interface ToastApi {
     toast: (options: ToastOptions) => string;
     dismiss: (id: string) => void;
+    /**
+     * Patches an open toast in place; only a changed duration restarts the countdown.
+     * Unknown or closing ids are ignored.
+     */
+    update: (id: string, patch: Partial<ToastOptions>) => void;
 }
+type ToastState = 'open' | 'closing';
+interface ToastRecord {
+    id: string;
+    options: ToastOptions;
+    state: ToastState;
+}
+interface ToastQueueContextValue {
+    toasts: ToastRecord[];
+    dismiss: (id: string) => void;
+    remove: (id: string) => void;
+    registerRoot: (id: string, root: HTMLDivElement | null) => void;
+    dismissLabel: string;
+    registerRenderer: () => () => void;
+}
+export declare const TOAST_VIEWPORT_INLINE_SIZE = "min(380px, calc(100vw - 32px))";
+export declare function useToastQueueContext(part: string): ToastQueueContextValue;
 export declare function useToast(): ToastApi;
 declare function ToastProvider({ children, max, duration, dismissLabel, }: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function ToastViewport({ ref, className, sx, ...props }: ToastViewportProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ToastPortal({ children, contained }: {
+    children: ReactNode;
+    contained?: boolean;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ToastItem({ record, exposed, paused, style, className, escapeDismiss, }: {
+    record: ToastRecord;
+    exposed?: boolean;
+    paused?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    escapeDismiss?: boolean;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function ToastRoot(props: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Toast: typeof ToastRoot & {
     Provider: typeof ToastProvider;

package/dist/types/components/toast-stack/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastStack } from './toast-stack';
+export type { ToastStackProps, ToastStackPosition, ToastStackVariant } from './toast-stack';

package/dist/types/components/toast-stack/toast-stack.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type ToastStackVariant = 'stacked' | 'list';
+export type ToastStackPosition = 'bottom-start' | 'bottom-center' | 'bottom-end';
+type PartStyle = {
+    className?: string;
+    css?: Interpolation<Theme>;
+};
+export interface ToastStackProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    variant?: ToastStackVariant;
+    position?: ToastStackPosition;
+    contained?: boolean;
+    maxVisible?: number;
+    label?: string;
+    hotkey?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
+    slotProps?: {
+        list?: PartStyle;
+        toggle?: PartStyle;
+    };
+}
+export declare function ToastStack(props: ToastStackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ToastStack {
+    var displayName: string;
+}
+export {};

package/dist/types/components/tooltip/tooltip.d.ts

@@ -16,9 +16,9 @@ export interface TooltipTriggerProps extends ComponentPropsWithRef<'button'>, Sx
 }
 export interface TooltipContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, placement, openDelay, closeDelay, children, }: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TooltipRoot(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function TooltipTrigger({ ref, 'aria-describedby': ariaDescribedByProp, className, sx, ...rest }: TooltipTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TooltipContent({ ref, style, className, sx, ...rest }: TooltipContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function TooltipContent(props: TooltipContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const Tooltip: typeof TooltipRoot & {
     Trigger: typeof TooltipTrigger;
     Content: typeof TooltipContent;

package/dist/types/components/tree-view/index.d.ts

@@ -0,0 +1 @@
+export { TreeView, type TreeNode, type TreeViewMessages, type TreeViewPartProps, type TreeViewProps, type TreeViewSlotProps, } from './tree-view';

package/dist/types/components/tree-view/tree-view.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export interface TreeNode {
+    id: string;
+    label: string;
+    children?: readonly TreeNode[];
+    hasChildren?: boolean;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface TreeViewMessages {
+    loading: (label: string) => string;
+    error: (label: string) => string;
+    empty: string;
+}
+export interface TreeViewPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export type TreeViewSlotProps = Partial<Record<'tree' | 'row' | 'label' | 'icon' | 'disclosure' | 'group' | 'status', TreeViewPartProps>>;
+export interface TreeViewProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue' | 'onChange'>, SxProps {
+    nodes: readonly TreeNode[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (id: string | null) => void;
+    open?: readonly string[];
+    defaultOpen?: readonly string[];
+    onOpenChange?: (ids: readonly string[]) => void;
+    loadChildren?: (node: TreeNode, options: {
+        signal: AbortSignal;
+    }) => Promise<readonly TreeNode[]>;
+    onLoadError?: (error: unknown, node: TreeNode) => void;
+    label?: string;
+    messages?: Partial<TreeViewMessages>;
+    empty?: ReactNode;
+    treeRef?: Ref<HTMLUListElement>;
+    locale?: Intl.LocalesArgument;
+    slotProps?: TreeViewSlotProps;
+}
+/** Single-select APG tree with real roving focus. Right opens/enters and Left closes/parents,
+ * including RTL. Up/Down clamp; Home/End jump; Enter/Space select; typeahead resets after 500ms.
+ * Lazy results are cached per instance; remount with a new key to replace the dataset cache. */
+export declare function TreeView({ nodes, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, loadChildren, onLoadError, label, messages: messageProps, empty, treeRef, locale, slotProps, ref, className, sx, onKeyDown, onClick, onBlur, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: TreeViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace TreeView {
+    var displayName: string;
+}

package/dist/types/components/usage-meter/index.d.ts

@@ -0,0 +1,2 @@
+export { UsageMeter } from './usage-meter';
+export type { UsageMeterProps, UsageMeterSegment, UsageMeterSelection, UsageMeterState, UsageMeterSummary, UsageMeterItem, UsageMeterLabels, UsageMeterPartProps, UsageMeterSize, } from './usage-meter';

package/dist/types/components/usage-meter/usage-meter.d.ts

@@ -0,0 +1,83 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type UsageMeterState = 'normal' | 'near-limit' | 'over-limit' | 'unavailable';
+export type UsageMeterSize = 'sm' | 'md' | 'lg';
+export type UsageMeterSelection = {
+    kind: 'segment';
+    id: string;
+} | {
+    kind: 'remainder';
+};
+export interface UsageMeterSegment {
+    /** Stable, nonempty, unique identity. */
+    id: string;
+    label: string;
+    value: number;
+    tone?: 'accent' | 'info' | 'success' | 'warning';
+}
+export type UsageMeterItem = UsageMeterSelection & {
+    label: string;
+    value: number;
+};
+export interface UsageMeterSummary {
+    total: number;
+    limit: number;
+    free: number;
+    over: number;
+    ratio: number;
+    state: UsageMeterState;
+    formattedTotal: string;
+    formattedLimit: string;
+    formattedPercent: string;
+}
+export interface UsageMeterLabels {
+    free: string;
+    near: string;
+    over: string;
+    normal: string;
+    unavailable: string;
+    legend: string;
+}
+export type UsageMeterPartProps<T extends 'div' | 'span' | 'p' | 'ul' | 'button' = 'span'> = Omit<ComponentPropsWithoutRef<T>, 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface UsageMeterProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>, SxProps {
+    label: ReactNode;
+    segments: readonly UsageMeterSegment[];
+    limit: number;
+    warnAt?: number;
+    size?: UsageMeterSize;
+    locale?: Intl.LocalesArgument;
+    numberFormatOptions?: Intl.NumberFormatOptions;
+    unitLabel?: ReactNode;
+    /** English defaults; translation callbacks also localize relational value copy. */
+    labels?: Partial<UsageMeterLabels>;
+    getValueLabel?: (summary: UsageMeterSummary) => string;
+    getItemLabel?: (item: UsageMeterItem, summary: UsageMeterSummary) => string;
+    interactive?: boolean;
+    value?: UsageMeterSelection | null;
+    defaultValue?: UsageMeterSelection | null;
+    onValueChange?: (selection: UsageMeterSelection | null) => void;
+    announceChanges?: boolean;
+    statusIcon?: (state: UsageMeterState) => ReactNode;
+    slotProps?: {
+        root?: UsageMeterPartProps<'div'>;
+        title?: UsageMeterPartProps;
+        status?: UsageMeterPartProps;
+        total?: UsageMeterPartProps<'p'>;
+        track?: UsageMeterPartProps<'div'>;
+        segment?: UsageMeterPartProps;
+        overage?: UsageMeterPartProps;
+        limit?: UsageMeterPartProps;
+        legend?: UsageMeterPartProps<'ul'>;
+        item?: UsageMeterPartProps<'button'>;
+    };
+}
+/** Finite allowance, not task progress. The meter is not focusable; legend arrows/Home/End
+ * move focus, Enter/Space toggle a pin, and Escape clears it. Numeric ARIA saturates at the
+ * allowance while visible text and aria-valuetext retain actual overuse. */
+export declare function UsageMeter({ ref, label, segments, limit, warnAt, size, locale, numberFormatOptions, unitLabel, labels: labelsProp, getValueLabel, getItemLabel, interactive, value, defaultValue, onValueChange, announceChanges, statusIcon, slotProps, className, sx, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, 'aria-label': ariaLabel, ...rest }: UsageMeterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace UsageMeter {
+    var displayName: string;
+}

package/dist/types/index.d.ts

@@ -1,40 +1,85 @@
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/announcement-bar';
 export * from './components/avatar';
+export * from './components/avatar-group';
 export * from './components/badge';
+export * from './components/bottom-sheet';
 export * from './components/breadcrumbs';
 export * from './components/button';
 export * from './components/calendar';
 export * from './components/card';
+export * from './components/carousel';
 export * from './components/checkbox';
+export * from './components/chip-group';
+export * from './components/code-block';
 export * from './components/command-palette';
 export * from './components/combobox';
+export * from './components/comment-thread';
 export * from './components/container';
+export * from './components/context-menu';
+export * from './components/copy-button';
+export * from './components/countdown';
 export * from './components/date-picker';
+export * from './components/date-range-picker';
 export * from './components/dialog';
 export * from './components/divider';
+export * from './components/drawer';
+export * from './components/elastic-slider';
+export * from './components/empty-state';
+export * from './components/expandable-card';
+export * from './components/expanding-search';
+export * from './components/file-dropzone';
+export * from './components/filter-toolbar';
 export * from './components/flex';
+export * from './components/hold-to-confirm';
+export * from './components/image-compare';
+export * from './components/inline-edit';
+export * from './components/hover-card';
+export * from './components/json-viewer';
 export * from './components/kbd';
+export * from './components/mention-input';
 export * from './components/menu';
+export * from './components/metric-card';
+export * from './components/multi-select';
 export * from './components/navigation';
 export * from './components/pagination';
+export * from './components/password-field';
 export * from './components/pill';
 export * from './components/popover';
 export * from './components/progress';
+export * from './components/radio-cards';
 export * from './components/radio-group';
+export * from './components/resizable-panels';
+export * from './components/scroll-area';
+export * from './components/search-field';
+export * from './components/segmented-control';
 export * from './components/select';
+export * from './components/signature-pad';
 export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/sortable-data-table';
 export * from './components/spinner';
+export * from './components/split-button';
 export * from './components/stack';
+export * from './components/stepper';
+export * from './components/swipe-actions';
 export * from './components/switch';
 export * from './components/tabs';
+export * from './components/tag-input';
 export * from './components/text-field';
 export * from './components/textarea';
 export { ThemeProvider, useTheme, type ThemeProviderProps } from './components/theme-provider/theme-provider';
 export * from './components/theme-root';
+export * from './components/theme-switch';
+export * from './components/time-picker';
+export * from './components/timeline';
 export * from './components/toast';
+export * from './components/toast-stack';
 export * from './components/toggle-group';
 export * from './components/tooltip';
+export * from './components/tree-view';
+export * from './components/usage-meter';
 export { styled } from './styling/styled';
 export type { SxProps } from './styling/sx';
 export { theme, type JfraderTheme } from './styling/theme';

package/dist/types/overlay/overlay-layer.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type ElementProps, type FloatingContext } from '@floating-ui/react';
+/**
+ * `container`: a layer whose content holds focus and may host other layers (Popover,
+ * DateRangePicker). Escape and outside press are ignored by the layer itself while a child
+ * layer is open.
+ * `leaf`: a layer that hosts none (HoverCard). Focus usually stays outside it (e.g. in the
+ * parent's content, whose own key handling stops the event from bubbling), so Escape is
+ * handled in the capture phase and stops at its target once the leaf closes.
+ */
+export type LayerKind = 'container' | 'leaf';
+/** Escape and outside-press dismissal for one layer; pass the result into `useInteractions`. */
+export declare function useLayerDismiss(context: FloatingContext, kind: LayerKind): ElementProps[];
+/**
+ * Registers one overlay layer and renders `children` with its node id, which the layer passes
+ * to `useOverlayFloating`. Layers rendered inside `children` become its children in the tree.
+ */
+export declare function OverlayLayer({ children }: {
+    children: (nodeId: string | undefined) => ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace OverlayLayer {
+    var displayName: string;
+}
+/**
+ * A layer for a menu. Its node joins the tree under the enclosing layer like any other, but the
+ * menu's own hooks see no parent node: useRole and useListNavigation read a parent node as a parent
+ * menu (a menuitem trigger, cross-axis open/close keys). The menu's content re-provides the node
+ * through `LayerContent`, so layers opened inside it nest under it.
+ */
+export declare function MenuLayer({ children }: {
+    children: (nodeId: string | undefined) => ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace MenuLayer {
+    var displayName: string;
+}
+/** Makes `nodeId` the parent of layers rendered inside `children`. */
+export declare function LayerContent({ nodeId, children }: {
+    nodeId: string | undefined;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace LayerContent {
+    var displayName: string;
+}
+/**
+ * Root boundary for an overlay that does not take part in layer nesting. Inside a layer it gets
+ * its own empty tree and no parent node, so it never reads the enclosing layer as its parent.
+ */
+export declare function IsolatedOverlay({ children }: {
+    children: ReactNode;
+}): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare namespace IsolatedOverlay {
+    var displayName: string;
+}

package/dist/types/overlay/use-overlay-floating.d.ts

@@ -1,11 +1,28 @@
-import { type OpenChangeReason, type Placement, type UseFloatingReturn } from '@floating-ui/react';
+import { type OpenChangeReason, type Placement, type Strategy, type UseFloatingReturn } from '@floating-ui/react';
 export interface OverlayFloatingOptions {
     open: boolean;
     onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
     placement: Placement;
+    /** Node id from `OverlayLayer`, for overlays that take part in nested dismissal. */
+    nodeId?: string;
+    /** Collision boundary for flip/shift/size. Defaults to the clipping ancestors (and viewport). */
+    boundary?: Element | null;
+    /** Receives the space left for the surface inside the boundary after each positioning pass. */
+    onAvailableSize?: (size: OverlayAvailableSize) => void;
+    /** CSS positioning strategy. Defaults to `absolute`. */
+    strategy?: Strategy;
+    /** Gap between the anchor and the surface, in px. Defaults to `ANCHOR_GAP`. */
+    gap?: number;
+    /** Position with `transform` (default) or with `left`/`top`, which leaves `transform` and
+     * `scale` free for the surface's own animation. */
+    transform?: boolean;
+}
+export interface OverlayAvailableSize {
+    width: number;
+    height: number;
 }
 /**
  * Shared positioning for Popover, Tooltip and Menu. `autoUpdate` only runs while both
  * elements are mounted, so a closed (unmounted) surface does no positioning work.
  */
-export declare function useOverlayFloating({ open, onOpenChange, placement, }: OverlayFloatingOptions): UseFloatingReturn<HTMLButtonElement>;
+export declare function useOverlayFloating({ open, onOpenChange, placement, nodeId, boundary, onAvailableSize, strategy, gap, transform, }: OverlayFloatingOptions): UseFloatingReturn<HTMLButtonElement>;

package/dist/types/styling/media.d.ts

@@ -1,2 +1,3 @@
 export declare const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
 export declare const FORCED_COLORS = "@media (forced-colors: active)";
+export declare const COARSE_POINTER = "@media (pointer: coarse)";

package/dist/types/styling/theme.d.ts

@@ -34,7 +34,19 @@ export declare const theme: {
         readonly info: "var(--ui-color-info)";
         readonly infoSoft: "var(--ui-color-info-soft)";
         readonly focusRing: "var(--ui-color-focus-ring)";
+        readonly signatureInkBlack: "var(--ui-color-signature-ink-black)";
+        readonly signatureInkBlue: "var(--ui-color-signature-ink-blue)";
+        readonly signatureInkViolet: "var(--ui-color-signature-ink-violet)";
         readonly scrim: "var(--ui-color-scrim)";
+        readonly syntaxKeyword: "var(--ui-color-syntax-keyword)";
+        readonly syntaxString: "var(--ui-color-syntax-string)";
+        readonly syntaxConstant: "var(--ui-color-syntax-constant)";
+        readonly syntaxFunction: "var(--ui-color-syntax-function)";
+        readonly syntaxType: "var(--ui-color-syntax-type)";
+        readonly syntaxTag: "var(--ui-color-syntax-tag)";
+        readonly syntaxProperty: "var(--ui-color-syntax-property)";
+        readonly syntaxComment: "var(--ui-color-syntax-comment)";
+        readonly syntaxPunctuation: "var(--ui-color-syntax-punctuation)";
     };
     readonly shadow: {
         readonly raised: "var(--ui-shadow-raised)";

package/dist/types/utils/use-controlled-state.d.ts

@@ -2,6 +2,7 @@
  * One state authority for controlled/uncontrolled components.
  * `value === undefined` means uncontrolled; internal state seeds from `defaultValue`.
  * Requests dedupe against the current value and notify only through `onChange`.
+ * `resetToDefault` restores the uncontrolled seed without notifying (native form reset).
  * Do not switch modes during an instance's lifetime (see SKILL.md §5).
  */
-export declare function useControlledState<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): readonly [T | undefined, (next: T) => void];
+export declare function useControlledState<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): readonly [T | undefined, (next: T) => void, () => void];