@jfrader/ui 0.5.1 → 0.7.0

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

@@ -13,17 +13,16 @@ export interface DialogPartRenderProps extends ButtonHTMLAttributes<HTMLButtonEl
 }
 export interface DialogTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
     /**
-     * Replaces the default button. Spread ALL supplied props onto the operative element and attach
-     * the supplied ref, including when composing through Button. The forwarded and callback refs
-     * refer to the rendered element, which need not be a button; their public types remain
-     * HTMLButtonElement for compatibility.
-     * Overridden handlers, className and style win; compose behavior manually to retain both:
+     * Replace the button. Spread all supplied props onto the element and attach the supplied ref,
+     * including through Button. Refs point to that element, even when it is not a button;
+     * the public ref type remains HTMLButtonElement for compatibility.
+     * Handler, className and style overrides replace the supplied values. Compose handlers to keep both:
      * `onClick={(e) => { p.onClick?.(e); mine(e); }}`.
-     * Only the render path joins data-ui markers into a token list; library selectors should use
-     * `[data-ui~="dialog-trigger"]`. The default button always has data-ui="dialog-trigger".
-     * For disabled anchors, compose through Button's render path: aria-disabled keeps them
-     * focusable and its supplied handler blocks primary click/Enter activation, but does NOT
-     * cover auxiliary/middle-click navigation. This part alone supplies native button semantics.
+     * The render path joins data-ui markers into a token list; use `[data-ui~="dialog-trigger"]`.
+     * The default button has data-ui="dialog-trigger".
+     * For disabled anchors, compose through Button's render path. aria-disabled keeps them focusable;
+     * its handler blocks primary click/Enter, but not auxiliary/middle-click navigation.
+     * This part supplies native button semantics only.
      */
     render?: (props: DialogPartRenderProps) => ReactNode;
 }
@@ -37,17 +36,16 @@ export interface DialogDescriptionProps extends ComponentPropsWithRef<'p'>, SxPr
 }
 export interface DialogCloseProps extends ComponentPropsWithRef<'button'>, SxProps {
     /**
-     * Replaces the default button. Spread ALL supplied props onto the operative element and attach
-     * the supplied ref, including when composing through Button. The forwarded and callback refs
-     * refer to the rendered element, which need not be a button; their public types remain
-     * HTMLButtonElement for compatibility.
-     * Overridden handlers, className and style win; compose behavior manually to retain both:
+     * Replace the button. Spread all supplied props onto the element and attach the supplied ref,
+     * including through Button. Refs point to that element, even when it is not a button;
+     * the public ref type remains HTMLButtonElement for compatibility.
+     * Handler, className and style overrides replace the supplied values. Compose handlers to keep both:
      * `onClick={(e) => { p.onClick?.(e); mine(e); }}`.
-     * Only the render path joins data-ui markers into a token list; library selectors should use
-     * `[data-ui~="dialog-close"]`. The default button always has data-ui="dialog-close".
-     * For disabled anchors, compose through Button's render path: aria-disabled keeps them
-     * focusable and its supplied handler blocks primary click/Enter activation, but does NOT
-     * cover auxiliary/middle-click navigation. This part alone supplies native button semantics.
+     * The render path joins data-ui markers into a token list; use `[data-ui~="dialog-close"]`.
+     * The default button has data-ui="dialog-close".
+     * For disabled anchors, compose through Button's render path. aria-disabled keeps them focusable;
+     * its handler blocks primary click/Enter, but not auxiliary/middle-click navigation.
+     * This part supplies native button semantics only.
      */
     render?: (props: DialogPartRenderProps) => ReactNode;
 }

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

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SurfaceAppearance } from '../../styling/surface';
 import { type SxProps } from '../../styling/sx';
 export type DrawerSide = 'inline-start' | 'inline-end' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg';
@@ -21,6 +22,11 @@ export interface DrawerContentProps extends Omit<ComponentPropsWithRef<'dialog'>
     withDescription?: boolean;
 }
 export interface DrawerPanelProps extends ComponentPropsWithRef<'div'>, SxProps {
+    /**
+     * `contrast` (default) uses the dark palette with a charcoal surface on any page theme.
+     * `default` keeps the enclosing theme.
+     */
+    appearance?: SurfaceAppearance;
 }
 export interface DrawerHeaderProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
@@ -38,7 +44,7 @@ export interface DrawerCloseProps extends ComponentPropsWithRef<'button'>, SxPro
 declare function DrawerRoot({ open: openProp, defaultOpen, onOpenChange, side, size, draggable, children, }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function DrawerTrigger({ ref, onClick, className, sx, ...rest }: DrawerTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function DrawerContent({ ref, className, sx, ...props }: DrawerContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function DrawerPanel({ ref, className, sx, ...props }: DrawerPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerPanel({ ref, className, appearance, style, sx, ...props }: DrawerPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function DrawerHeader({ ref, className, sx, ...props }: DrawerHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function DrawerBody({ ref, className, sx, ...props }: DrawerBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function DrawerFooter({ ref, className, sx, ...props }: DrawerFooterProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,59 @@
+import { type ComponentPropsWithRef, type CSSProperties, type HTMLAttributes, type ReactNode, type RefCallback } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type EmblemShape = 'shield' | 'circle' | 'squircle' | 'hexagon';
+export type EmblemSize = 'sm' | 'md' | 'lg' | 'xl';
+export type EmblemPattern = 'none' | 'stripes' | 'hoops' | 'sash';
+export interface EmblemPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+/** Props the `render` callback spreads onto the element it returns. */
+export interface EmblemRenderProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    ref: RefCallback<HTMLElement> | null;
+    css: Interpolation<Theme>;
+    'data-ui': string;
+    'data-shape': EmblemShape;
+    'data-pattern': EmblemPattern;
+    style: CSSProperties;
+    children: ReactNode;
+}
+export interface EmblemProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role' | 'aria-label' | 'color'>, SxProps {
+    /** Accessible name, and the words the monogram is built from. */
+    name: string;
+    /** Replaces the initials derived from `name`. Three characters fill a plate. */
+    initials?: string;
+    /** Crest image, drawn to the plate's shape. The monogram stands in while it is missing or broken. */
+    src?: string;
+    /** Fill color. The highlight, the pattern and the default ink derive from it. */
+    color?: string;
+    /**
+     * Pattern color. Defaults to a lighter tint of `color`; keep it near the fill's lightness, or the
+     * monogram loses its contrast over the bands.
+     */
+    secondaryColor?: string;
+    /** Ink color over the fill. Defaults to the fill's own contrast color. */
+    inkColor?: string;
+    /** Plate outline. `shield` keeps the crest geometry this component came from. */
+    shape?: EmblemShape;
+    /** Plate side: `sm` 24px, `md` 32px, `lg` 40px, `xl` 56px. */
+    size?: EmblemSize;
+    /** Pattern over the fill. `none` leaves the plain gradient. */
+    pattern?: EmblemPattern;
+    slotProps?: {
+        image?: EmblemPartProps;
+        monogram?: EmblemPartProps;
+    };
+    /**
+     * Replaces the root `<span>` with the returned element, for a linked emblem. Spread every
+     * supplied prop onto it and attach the supplied ref. The accessible name is `name`, followed by
+     * the monogram while it stands in for an image, because a link's visible text belongs in its
+     * name (WCAG 2.5.3). Pass your own `aria-label` after the spread to describe the destination,
+     * and keep the monogram in it.
+     */
+    render?: (props: EmblemRenderProps) => ReactNode;
+}
+export declare function Emblem({ ref, name, initials, src, color, secondaryColor, inkColor, shape, size, pattern, slotProps, className, style, sx, render, ...rest }: EmblemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Emblem {
+    var displayName: string;
+}

package/dist/types/components/emblem/index.d.ts

@@ -0,0 +1,2 @@
+export { Emblem } from './emblem';
+export type { EmblemPartProps, EmblemPattern, EmblemProps, EmblemRenderProps, EmblemShape, EmblemSize, } from './emblem';

package/dist/types/components/empty-state/empty-state.d.ts

@@ -27,8 +27,8 @@ export interface EmptyStateProps extends Omit<ComponentPropsWithRef<'section'>,
     slotProps?: EmptyStateSlotProps;
 }
 /**
- * Empty view with a literal next action. Use Skeleton while content is pending and Alert for an
- * error next to existing content. The caller owns copy, translations and result announcements.
+ * Show a message and action when content is empty. Use Skeleton while loading and Alert for an
+ * error alongside existing content. Supply copy, translations and result announcements.
  */
 export declare function EmptyState({ ref, title, description, icon, action, headingLevel, variant, slotProps, className, sx, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: EmptyStateProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace EmptyState {

package/dist/types/components/file-dropzone/file-dropzone.d.ts

@@ -82,10 +82,9 @@ export interface FileDropzoneProps extends Omit<ComponentPropsWithRef<'div'>, 'd
     inputRef?: Ref<HTMLInputElement>;
     slotProps?: FileDropzoneSlotProps;
 }
-/** The visible surface is the native label of an operable file input; no custom dropzone role.
- * Submit canonical value items, not input.files: drops and accumulated batches are not
- * reflected in native FormData/required. Client validation is a convenience; validate uploads
- * independently on the server. */
+/** Choose or drop files through a labelled native file input; there is no custom dropzone role.
+ * Submit value items, not input.files. Drops and accumulated batches are absent from native
+ * FormData and native required validation. Validate uploads on the server too. */
 export declare function FileDropzone({ ref, value, defaultValue, onValueChange, onReject, accept, multiple, maxFiles, maxSize, validate, onUpload, listPlacement, compactAt, label, description, note, dropLabel, error, messages, locale, disabled, readOnly, required, size, paste, renderFileIcon, name, inputRef, slotProps, className, sx, onDragEnter, onDragOver, onDragLeave, onDrop, onPaste, ...rest }: FileDropzoneProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace FileDropzone {
     var displayName: string;

package/dist/types/components/filter-toolbar/filter-toolbar.d.ts

@@ -54,8 +54,8 @@ export interface FilterToolbarResultCountProps extends Omit<ComponentPropsWithRe
     loadingLabel?: string;
     unknownLabel?: string;
 }
-/** A named group with native Tab order. Enter/Space activate remove and clear buttons;
- * the shell does not intercept editing keys or promise roving toolbar navigation. */
+/** Group filters with a name and native Tab order. Enter/Space activate remove and clear buttons.
+ * Editing keys pass through. Roving toolbar navigation is not supported. */
 declare function FilterToolbarRoot({ ref, value: valueProp, defaultValue, onValueChange, disabled, label, messages: messagesProp, className, sx, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex, ...rest }: FilterToolbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function Controls({ children, className, sx, ...rest }: FilterToolbarControlsProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function ActiveFilters({ empty, slotProps, className, sx, ...rest }: FilterToolbarActiveFiltersProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/game-card/card-frame.d.ts

@@ -0,0 +1,16 @@
+export declare const CARD_FRAME: {
+    /** height = width × ratio */
+    readonly ratio: 1.48;
+    /** border-radius = width / cornerDivisor */
+    readonly cornerDivisor: 13;
+};
+export declare const CARD_FACE: {
+    /** The centre mark is this share of the card's width, in container query units. */
+    readonly markWidthRatio: 0.35;
+    /** The suit watermarks sit this far from the top and bottom edges. */
+    readonly watermarkInsetPercent: 3;
+    /** Watermarks are a texture, not a second reading of the suit. */
+    readonly watermarkOpacity: 0.15;
+    /** Horizontal breathing room around the centre mark. */
+    readonly contentPaddingPercent: 4;
+};

package/dist/types/components/game-card/decks.d.ts

@@ -0,0 +1,27 @@
+export type SpanishSuit = 'oros' | 'copas' | 'espadas' | 'bastos';
+export type FrenchSuit = 'hearts' | 'diamonds' | 'clubs' | 'spades';
+export type GameCardSuit = SpanishSuit | FrenchSuit;
+/** Spanish cards print 1–7 and then 10, 11 and 12 for sota, caballo and rey. */
+export type SpanishRank = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12;
+export type FrenchRank = 'A' | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 'J' | 'Q' | 'K';
+export type GameCardRank = SpanishRank | FrenchRank;
+export type GameCardValue = {
+    deck: 'spanish';
+    suit: SpanishSuit;
+    rank: SpanishRank;
+} | {
+    deck: 'french';
+    suit: FrenchSuit;
+    rank: FrenchRank;
+};
+/**
+ * Suit glyphs, keyed by suit (the two decks never share a suit name). The Spanish set is the one in
+ * use today — oros 💰, copas 🍷, espadas 🗡️, bastos 🌵. The French set asks for text presentation
+ * (U+FE0E) so the ink stays ours and the deck keeps its two-colour convention, which an
+ * emoji-presentation glyph would take over.
+ */
+export declare const SUIT_GLYPHS: Record<GameCardSuit, string>;
+/** The French deck's red/black split. Spanish glyphs carry their own colour. */
+export declare const SUIT_INK: Partial<Record<GameCardSuit, 'red' | 'ink'>>;
+/** Visible rank marks, shared by number. `rankLabel` on the card replaces the mark. */
+export declare const RANK_MARKS: Record<GameCardRank, string>;

package/dist/types/components/game-card/game-card.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type GameCardValue } from './decks';
+export type GameCardSize = 'sm' | 'md' | 'lg';
+export type GameCardFace = 'emoji' | 'back';
+export interface GameCardPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface GameCardProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'color'>, SxProps {
+    /**
+     * Accessible name, in the page's language and the consumer's grammar: "as de oros", "king of
+     * hearts". A face-down card names the back, never the value.
+     */
+    label: string;
+    /** What the card is. Omit it, or set `face="back"`, for a card that stays hidden. */
+    value?: GameCardValue;
+    /** Defaults to `emoji` with a value and `back` without one. */
+    face?: GameCardFace;
+    /** Card width: `sm` 32px, `md` 72px, `lg` 112px. */
+    size?: GameCardSize;
+    /** Replaces the printed rank mark; the suit glyph stays. */
+    rankLabel?: string;
+    /** Draws the card as worn: out of play, or waiting. */
+    dimmed?: boolean;
+    /** Your own art for the face — an image, an SVG, anything. Replaces the emoji print. */
+    children?: ReactNode;
+    slotProps?: {
+        face?: GameCardPartProps;
+        back?: GameCardPartProps;
+    };
+}
+export declare function GameCard({ ref, label, value, face, size, rankLabel, dimmed, children, slotProps, className, sx, ...rest }: GameCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace GameCard {
+    var displayName: string;
+}

package/dist/types/components/game-card/index.d.ts

@@ -0,0 +1,4 @@
+export { GameCard } from './game-card';
+export type { GameCardFace, GameCardPartProps, GameCardProps, GameCardSize } from './game-card';
+export { RANK_MARKS, SUIT_GLYPHS, SUIT_INK } from './decks';
+export type { FrenchRank, FrenchSuit, GameCardRank, GameCardSuit, GameCardValue, SpanishRank, SpanishSuit, } from './decks';

package/dist/types/components/hold-to-confirm/hold-to-confirm.d.ts

@@ -25,7 +25,7 @@ export interface HoldToConfirmProps extends Omit<ComponentPropsWithRef<'button'>
     confirmedIcon?: ReactNode;
     slotProps?: Partial<Record<'face' | 'icon' | 'label' | 'fill' | 'hint' | 'status', HoldToConfirmPartProps>>;
 }
-/** Native button with timed Space/Enter activation. Provide an untimed Dialog alternative in the application. */
+/** Hold Space or Enter to confirm. Provide an untimed confirmation in a Dialog too. */
 export declare function HoldToConfirm({ ref, label, confirmedLabel, confirmationAnnouncement, getHoldDescription, locale, duration, value, defaultValue, onValueChange, onConfirm, onHoldChange, tone, size, icon, confirmedIcon, disabled, slotProps, className, sx, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, onClick, onContextMenu, 'aria-describedby': describedBy, ...rest }: HoldToConfirmProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace HoldToConfirm {
     var displayName: string;

package/dist/types/components/hover-card/hover-card.d.ts

@@ -36,11 +36,11 @@ export interface HoverCardTriggerRenderProps extends HTMLAttributes<HTMLElement>
 }
 export interface HoverCardTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
     /**
-     * Replaces the default button, e.g. with a profile link. Spread ALL supplied props onto the
-     * operative element and attach the supplied ref. The ref refers to the rendered element, which
-     * need not be a button; its public type remains HTMLButtonElement for compatibility.
-     * Native activation is never prevented: a rendered link still navigates on click, Enter or tap.
-     * Compact inline links rely on the WCAG 2.5.8 inline exception for target size.
+     * Replace the button, e.g. with a profile link. Spread all supplied props onto the element
+     * and attach the supplied ref. The ref points to that element, even when it is not a button;
+     * its public type remains HTMLButtonElement for compatibility.
+     * Links still navigate on click, Enter or tap; native activation is not prevented.
+     * Inline links rely on the WCAG 2.5.8 inline exception for target size.
      */
     render?: (props: HoverCardTriggerRenderProps) => ReactNode;
 }

package/dist/types/components/in-view-title/in-view-title.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type InViewTitleVariant = 'word' | 'line' | 'blur' | 'tracking' | 'wipe';
+export interface InViewTitlePartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface InViewTitleProps extends Omit<ComponentPropsWithRef<'h2'>, 'children'>, SxProps {
+    text: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    variant?: InViewTitleVariant;
+    once?: boolean;
+    locale?: Intl.LocalesArgument;
+    slotProps?: {
+        visual?: InViewTitlePartProps;
+        segment?: InViewTitlePartProps;
+    };
+}
+export declare function InViewTitle({ text, level, variant, once, locale, slotProps, ref, className, sx, ...rest }: InViewTitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace InViewTitle {
+    var displayName: string;
+}

package/dist/types/components/in-view-title/index.d.ts

@@ -0,0 +1 @@
+export { InViewTitle, type InViewTitleProps, type InViewTitleVariant, type InViewTitlePartProps } from './in-view-title';

package/dist/types/components/inline-edit/inline-edit.d.ts

@@ -7,7 +7,7 @@ export type InlineEditPhase = 'idle' | 'saving' | 'saved' | 'failed';
 type ControlElement = HTMLInputElement | HTMLTextAreaElement;
 export interface InlineEditMessages {
     /**
-     * Accessible name of the resting trigger; `value` is the persisted value. While it is empty,
+     * Accessible name of the value button; `value` is the saved value. When empty,
      * the visible placeholder follows this text in the name.
      */
     edit: (context: {
@@ -41,11 +41,11 @@ export interface InlineEditSlotProps {
     error?: InlineEditPartProps;
     status?: InlineEditPartProps;
 }
-/** Native attributes and handlers for the editor; value, editability and placeholder stay owned. */
+/** Native editor attributes and handlers. The component sets value, editability and placeholder. */
 export interface InlineEditControlProps extends Omit<TextareaHTMLAttributes<ControlElement>, 'value' | 'defaultValue' | 'children' | 'disabled' | 'readOnly' | 'placeholder' | 'cols' | 'dangerouslySetInnerHTML'> {
 }
 export interface InlineEditProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue' | 'onChange'>, SxProps {
-    /** Persisted value shown by the trigger; never the draft. */
+    /** Saved value shown by the trigger, not the draft. */
     value?: string;
     defaultValue?: string;
     /** Requested once per resolved save, before the close request. */
@@ -54,7 +54,7 @@ export interface InlineEditProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Persists a changed value; a throw or rejection is a failed save. */
+    /** Saves a changed value. Throw or reject to report a failed save. */
     onSave: (next: string) => void | Promise<unknown>;
     /** Accessible name of the editor and part of the trigger's name. */
     label: string;
@@ -70,7 +70,7 @@ export interface InlineEditProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     readOnly?: boolean;
     /** Saves when focus leaves the whole widget. */
     saveOnBlur?: boolean;
-    /** Resting content while the persisted value is empty. */
+    /** Content shown while the saved value is empty. */
     placeholder?: ReactNode;
     /** Native placeholder of the editor. */
     inputPlaceholder?: string;
@@ -78,7 +78,7 @@ export interface InlineEditProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     /** External error; while present it marks the editor invalid and blocks saving. */
     error?: ReactNode;
     controlProps?: InlineEditControlProps;
-    /** The mounted editor element, or null while resting. */
+    /** The editor element, or null when not editing. */
     controlRef?: Ref<ControlElement>;
     messages?: Partial<InlineEditMessages>;
     editIcon?: ReactNode;

package/dist/types/components/json-viewer/json-viewer.d.ts

@@ -66,15 +66,13 @@ export interface JsonViewerProps extends Omit<ComponentPropsWithRef<'div'>, 'onS
     }) => void;
     slotProps?: JsonViewerSlotProps;
 }
-/** Read-only JSON tree. Search overlays expansion/pages; clearing restores base state.
- * Each expanded treeitem OWNS its child role=group via aria-owns; the group is a DOM sibling
- * (flattened out of the treeitem) so the author name stays scoped to the label — nesting it in
- * the DOM would fold the whole subtree into the treeitem's visible text and break the
- * label-content-name-mismatch axe gate. Roving DOM focus follows the TreeView
- * navigation contract. Right opens, Left closes/moves to parent even in RTL. Up/Down clamp;
- * Home/End move; Enter/Space activate; 500ms typeahead; / searches; Ctrl/Cmd+C copies JSON
- * (+Shift copies path).
- * Strict JSON only, no getters/cycles/nonfinite numbers. Paged, not virtualized.
+/** Browse JSON without editing it.
+ * Search adds expansion and pages; clearing restores the base state.
+ * Expanded treeitems reference sibling child groups with aria-owns to keep names scoped to labels.
+ * TreeView navigation: Right opens/enters; Left closes/moves to the parent, including in RTL.
+ * Up/Down stop at the ends; Home/End move; Enter/Space activate. Typeahead resets after 500ms.
+ * / searches; Ctrl/Cmd+C copies JSON; add Shift to copy the path.
+ * Accepts strict JSON only, without getters, cycles or nonfinite numbers. Paged, not virtualized.
  */
 export declare function JsonViewer({ data, rootName, expandedValue, defaultExpandedValue, onExpandedValueChange, defaultExpandDepth, query: queryProp, defaultQuery, onQueryChange, value: valueProp, defaultValue, onValueChange, onNodeActivate, searchable, copyable, showPath, pageSize: pageSizeProp, maxMatches: maxMatchesProp, maxHeight, size, locale, labels: labelProps, onCopy, onCopyError, slotProps, ref, className, sx, style, onKeyDown, onClick, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: JsonViewerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace JsonViewer {

package/dist/types/components/keycap-keyboard/index.d.ts

@@ -0,0 +1,2 @@
+export { KeycapKeyboard } from './keycap-keyboard';
+export type { KeycapKeyboardProps, KeycapKeyboardSlotProps, KeycapSpec } from './keycap-keyboard';

package/dist/types/components/keycap-keyboard/keycap-keyboard.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export interface KeycapSpec {
+    code: string;
+    legend: ReactNode;
+    units?: number;
+}
+export interface KeycapKeyboardSlotProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface KeycapKeyboardProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'tabIndex' | 'role' | 'onKeyDown' | 'onKeyUp'>, SxProps {
+    layout?: 'compact' | 'letters';
+    rows?: readonly (readonly KeycapSpec[])[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (codes: readonly string[]) => void;
+    eventTarget?: HTMLInputElement | HTMLTextAreaElement | null;
+    tone?: 'neutral' | 'accent';
+    paused?: boolean;
+    slotProps?: {
+        row?: KeycapKeyboardSlotProps;
+        key?: KeycapKeyboardSlotProps;
+        legend?: KeycapKeyboardSlotProps;
+    };
+}
+/** Show a keyboard illustration. Supply text input, focus and shortcut descriptions separately. */
+export declare function KeycapKeyboard({ ref, layout, rows, value, defaultValue, onValueChange, eventTarget, tone, paused, slotProps, className, sx, style, ...rest }: KeycapKeyboardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace KeycapKeyboard {
+    var displayName: string;
+}

package/dist/types/components/lightbox-gallery/index.d.ts

@@ -0,0 +1,2 @@
+export { LightboxGallery } from './lightbox-gallery';
+export type { LightboxGalleryImage, LightboxGalleryLabels, LightboxGalleryProps, LightboxGallerySlotProps, } from './lightbox-gallery';

package/dist/types/components/lightbox-gallery/lightbox-gallery.d.ts

@@ -0,0 +1,74 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { vars } from '@jfrader/tokens/vars';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export interface LightboxGalleryImage {
+    id: string;
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+    title?: string;
+    caption?: ReactNode;
+    srcSet?: string;
+    sizes?: string;
+}
+type Slot<Tag extends keyof React.JSX.IntrinsicElements> = Omit<ComponentPropsWithRef<Tag>, 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface LightboxGallerySlotProps {
+    grid?: Slot<'ul'>;
+    tile?: Omit<Slot<'button'>, 'type'>;
+    image?: Omit<Slot<'img'>, 'src' | 'srcSet' | 'sizes' | 'alt' | 'width' | 'height'>;
+    viewer?: Omit<Slot<'dialog'>, 'open'> & {
+        withDescription?: boolean;
+    };
+    stage?: Slot<'div'>;
+    title?: Slot<'h2'>;
+    caption?: Slot<'p'>;
+    thumbnails?: Slot<'div'>;
+    controls?: Slot<'div'>;
+    status?: Slot<'div'>;
+}
+export interface LightboxGalleryLabels {
+    open: string;
+    close: string;
+    previous: string;
+    next: string;
+    zoom: string;
+    zoomIn: string;
+    zoomOut: string;
+    reset: string;
+    panLeft: string;
+    panRight: string;
+    panUp: string;
+    panDown: string;
+    empty: string;
+    unavailable: string;
+    imageUnavailable: string;
+    loading: string;
+    thumbnails: string;
+    position: (position: string, total: string) => string;
+    zoomPercent: (percent: string) => string;
+}
+export interface LightboxGalleryProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>, SxProps {
+    images: readonly LightboxGalleryImage[];
+    label: string;
+    minColumnWidth?: number;
+    gap?: keyof typeof vars.space;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (id: string | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    maxZoom?: number;
+    labels?: Partial<LightboxGalleryLabels>;
+    locale?: Intl.LocalesArgument;
+    slotProps?: LightboxGallerySlotProps;
+}
+export declare function LightboxGallery({ ref, images, label, minColumnWidth, gap, value, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, maxZoom, labels: labelOverrides, locale, slotProps, className, sx, ...rest }: LightboxGalleryProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace LightboxGallery {
+    var displayName: string;
+}
+export {};

package/dist/types/components/link-unfurl/index.d.ts

@@ -0,0 +1,2 @@
+export { LinkUnfurl } from './link-unfurl';
+export type { LinkUnfurlLabels, LinkUnfurlMessage, LinkUnfurlPreview, LinkUnfurlPreviewRequestContext, LinkUnfurlPreviewStatus, LinkUnfurlProps, LinkUnfurlSlotProps, LinkUnfurlSuggestion, } from './link-unfurl';