@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/grid-list/row.d.ts

@@ -0,0 +1,24 @@
+import type { Signal } from "@rivetjs/reactivity";
+import { type CollectionNodeSpec } from "../collections/base.js";
+import type { Key, Node } from "../collections/types.js";
+import type { focusRingFocus } from "../focus/focus-ring.jsx";
+import { type SlotId } from "../slots/index.jsx";
+import type { GridListStateLike } from "./behaviour.js";
+/** A render-prop function (not a lazy children slot). */
+export declare const isFn: (v: unknown) => boolean;
+/** react-aria `useSlotId` on the server: the id is always rendered; in the browser only while the part is. */
+export declare const slotRef: (slot: SlotId) => string | undefined;
+export declare const LINK_PROPS: readonly ["href", "hrefLang", "target", "rel", "download", "ping", "referrerPolicy", "routerOptions"];
+export declare const PRESS_PROPS: readonly ["onPressStart", "onPressEnd", "onPressChange", "onPress", "onPressUp", "onClick"];
+/** The row's node props a one-node collection needs (disabled, link, action). */
+export type RowSpec = Omit<CollectionNodeSpec<unknown>, "type">;
+/** The row's one-node collection (the node class is added here: handlers capture `RowSpec` data, never a class). */
+export declare const rowCollection: (spec: RowSpec) => import("../collections/base.js").BaseCollection<unknown>;
+export declare function rowSpec(key: Key, node: Node<unknown>, props: Record<string, any>): RowSpec;
+/** `spec` with the row's current `isDisabled` (a live GridListItem `isDisabled`; plain data). */
+export declare function withDisabled(spec: RowSpec, isDisabled: boolean): RowSpec;
+/** The row's node for an event: the DOM collection's (sibling links) with the row's own props. */
+export declare function eventNode(v: GridListStateLike<any>, spec: RowSpec): Node<unknown>;
+export type Ring = Parameters<typeof focusRingFocus>[0];
+/** A focus ring writing `attr` on `el` (RA `useFocusRing`; `data-focused` is the row's focused-key state, not the ring's). */
+export declare function ringOf(el: Element, within: boolean, attr: string, state?: Signal<boolean>): Ring;

package/grid-list/row.js

@@ -0,0 +1,57 @@
+import { isSlot } from "@rivetjs/runtime/slot";
+import { buildCollection, ItemNode } from "../collections/base.js";
+import { setDataAttr } from "../utils/data-attrs.jsx";
+import { slotIdRef } from "../slots/index.jsx";
+/** A render-prop function (not a lazy children slot). */
+export const isFn = (v) => typeof v === "function" && !isSlot(v);
+const isServer = typeof document === "undefined";
+/** react-aria `useSlotId` on the server: the id is always rendered; in the browser only while the part is. */
+export const slotRef = (slot) => (isServer ? slot.id : slotIdRef(slot));
+export const LINK_PROPS = ["href", "hrefLang", "target", "rel", "download", "ping", "referrerPolicy", "routerOptions"];
+// RA collectionItemProps press handlers: chained by selectable-item (mouse, touch, keyboard, virtual presses).
+export const PRESS_PROPS = ["onPressStart", "onPressEnd", "onPressChange", "onPress", "onPressUp", "onClick"];
+/** The row's one-node collection (the node class is added here: handlers capture `RowSpec` data, never a class). */
+export const rowCollection = (spec) => buildCollection([{ ...spec, type: ItemNode }]);
+export function rowSpec(key, node, props) {
+    // Plain data + the user's own (resumable) onAction reference, built as one literal.
+    const p = {
+        ...(props.isDisabled ? { isDisabled: true } : null),
+        ...(props.onAction ? { onAction: props.onAction } : null),
+        ...Object.fromEntries(PRESS_PROPS.filter((name) => props[name] !== undefined).map((name) => [name, props[name]])),
+        ...Object.fromEntries(LINK_PROPS.filter((name) => props[name] !== undefined).map((name) => [name, props[name]])),
+    };
+    return { id: key, textValue: node.textValue, "aria-label": node["aria-label"], props: p };
+}
+/** `spec` with the row's current `isDisabled` (a live GridListItem `isDisabled`; plain data). */
+export function withDisabled(spec, isDisabled) {
+    const props = { ...spec.props };
+    if (isDisabled)
+        props.isDisabled = true;
+    else
+        delete props.isDisabled;
+    return { ...spec, props };
+}
+/** The row's node for an event: the DOM collection's (sibling links) with the row's own props. */
+export function eventNode(v, spec) {
+    const dom = v.collection.getItem(spec.id);
+    if (!dom)
+        return rowCollection(spec).getItem(spec.id);
+    const node = Object.create(dom);
+    node.props = { ...dom.props, ...spec.props };
+    return node;
+}
+const rings = new WeakMap();
+/** A focus ring writing `attr` on `el` (RA `useFocusRing`; `data-focused` is the row's focused-key state, not the ring's). */
+export function ringOf(el, within, attr, state) {
+    let entry = rings.get(el);
+    if (!entry)
+        rings.set(el, (entry = {}));
+    const slot = within ? "within" : "self";
+    let focused = false;
+    return (entry[slot] ??= {
+        props: { within },
+        focused: Object.assign(() => focused, { set: (v) => (focused = v) }),
+        visible: { set: (v) => (setDataAttr(el, attr, v), state?.set(v)) },
+        state: { isFocused: false, isFocusVisible: false, unsubscribe: null },
+    });
+}

package/group/index.d.ts

@@ -0,0 +1,48 @@
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import type { AriaLabelingProps, DOMProps, HoverEvents } from "../utils/types.js";
+export interface GroupRenderProps {
+    /** Whether the group is currently hovered with a mouse. `[data-hovered]` */
+    isHovered: () => boolean;
+    /** Whether an element within the group is focused, either via a mouse or keyboard. `[data-focus-within]` */
+    isFocusWithin: () => boolean;
+    /** Whether an element within the group is keyboard focused. `[data-focus-visible]` */
+    isFocusVisible: () => boolean;
+    /** Whether the group is disabled. `[data-disabled]` */
+    isDisabled: () => boolean;
+    /** Whether the group is invalid. `[data-invalid]` */
+    isInvalid: () => boolean;
+}
+type BoolAttr = MaybeAccessor<boolean | "true" | "false" | undefined>;
+export interface GroupProps extends AriaLabelingProps, DOMProps, HoverEvents, RenderProps<GroupRenderProps>, DOMRenderProps<"div", GroupRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** Whether the group is disabled (may be an accessor). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+    /** Whether the group is invalid (may be an accessor). */
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    /** Whether the group is read only (may be an accessor). */
+    isReadOnly?: MaybeAccessor<boolean | undefined>;
+    /**
+     * An accessibility role for the group. `'region'` when the contents are important enough to be in the page
+     * table of contents, `'presentation'` when the group is visual only.
+     * @default 'group'
+     */
+    role?: "group" | "region" | "presentation";
+    /** `isDisabled` defaults to it (RAC). */
+    "aria-disabled"?: BoolAttr;
+    /** `isInvalid` defaults to it (RAC). */
+    "aria-invalid"?: MaybeAccessor<boolean | "true" | "false" | "grammar" | "spelling" | undefined>;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocusIn?: (e: FocusEvent) => void;
+    onFocusOut?: (e: FocusEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `GroupContext` (NumberField, ColorField, DatePicker, ComboBox provide the group's props). */
+export declare const GroupContext: import("@rivetjs/reactivity").Context<ContextValue<GroupProps, HTMLDivElement>>;
+/** A group of related UI controls (RAC `Group`). */
+export declare function Group(inProps: GroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export {};

package/group/index.jsx

@@ -0,0 +1,126 @@
+// Ported from react-aria-components `Group` (packages/react-aria-components/src/Group.tsx), Apache-2.0, © Adobe.
+// A `role="group"` container with hover, focus-within and focus-visible state for styling grouped controls
+// (input + buttons: NumberField, ColorField, DatePicker, ComboBox provide its props through `GroupContext`).
+// Rivet:
+// - render props are accessors (`class={({ isFocusWithin }) => …}`); the interaction states are signals only when
+//   a `class` / `style` / `children` function asks for them. `data-hovered` / `data-focus-within` /
+//   `data-focus-visible` are written by the handlers (`../utils/data-attrs.tsx`): zero cost before interaction.
+// - `isDisabled` / `isInvalid` / `isReadOnly` / `aria-disabled` / `aria-invalid` may be accessors (from props or
+//   `GroupContext`): read in the attribute bindings, the group is not re-created.
+// - `class` = RAC `className` (default `rv-Group`).
+// - focus within = `focusin` / `focusout` (`onFocusIn` / `onFocusOut` props are chained after the group's own);
+//   `onFocus` / `onBlur` / `onKeyDown` / `onKeyUp` go to the element as given (RAC spreads every HTML attribute).
+// `render` (RAC DOMRenderProps): given, the attributes go to `render(attrs, GroupRenderProps)` instead of the default `<div>`.
+// Deviations: RA useHover's "end hover when isDisabled turns true" effect is not ported (the
+// hover ends at the next pointerleave; `data-hovered` is not written while disabled).
+import { createContext, signal, untrack } from "@rivetjs/reactivity";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool, focusStateBlur, focusStateFocus, hoverStateEnter, hoverStateLeave, hoverStateOver, } from "../utils/data-attrs.jsx";
+import {} from "../utils/render.js";
+import { read } from "../interactions/utils.js";
+import { contextProps, renderPropsOf, resumableContext } from "../slots/index.jsx";
+import { hasLive, liveOptions } from "../utils/live.jsx";
+/** Global DOM events / props the group handles itself. */
+const OWNED = ["onPointerEnter", "onPointerLeave", "style", "render"];
+/** RAC `GroupContext` (NumberField, ColorField, DatePicker, ComboBox provide the group's props). */
+export const GroupContext = resumableContext(createContext({}, { id: "rv-group" }));
+const isFn = (v) => typeof v === "function";
+const truthy = (v) => !!v && v !== "false";
+const attr = (v) => (v == null ? undefined : String(v));
+/** A group of related UI controls (RAC `Group`). */
+export function Group(inProps) {
+    // Live props (P5): isDisabled / isInvalid / isReadOnly / aria-disabled / aria-invalid become accessors (the part reads
+    // them with `read`), class / style / children from a live view; the rest of the body is read once (untracked).
+    return untrack(() => group(inProps));
+}
+const GROUP_LIVE = ["isDisabled", "isInvalid", "isReadOnly", "aria-disabled", "aria-invalid"];
+function group(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, GroupContext);
+    const props = hasLive(ctxProps) ? liveOptions(ctxProps, GROUP_LIVE) : ctxProps;
+    const { id, onPointerEnter, onPointerLeave, onFocus, onBlur, onFocusIn, onFocusOut, onKeyDown, onKeyUp } = props;
+    const isDisabledProp = props.isDisabled;
+    const isInvalidProp = props.isInvalid;
+    const isReadOnlyProp = props.isReadOnly;
+    const ariaDisabled = props["aria-disabled"];
+    const ariaInvalid = props["aria-invalid"];
+    // RAC: `isDisabled ??= aria-disabled`, `isInvalid ??= aria-invalid` (both may be accessors).
+    const isDisabled = () => !!(read(isDisabledProp) ?? truthy(read(ariaDisabled)));
+    const isInvalid = () => !!(read(isInvalidProp) ?? truthy(read(ariaInvalid)));
+    const wantsStates = isFn(props.class) || isFn(props.style) || isFn(props.children);
+    const hovered = wantsStates ? signal(false) : undefined;
+    const focusWithin = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const interaction = {
+        isDisabled,
+        within: true,
+        onHoverStart: props.onHoverStart,
+        onHoverEnd: props.onHoverEnd,
+        onHoverChange: props.onHoverChange,
+        states: wantsStates ? { isHovered: hovered, isFocused: focusWithin, isFocusVisible: focusVisible } : undefined,
+    };
+    const values = {
+        isHovered: () => !!hovered?.(),
+        isFocusWithin: () => !!focusWithin?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        isDisabled,
+        isInvalid,
+    };
+    const rp = renderPropsOf(props, { values, defaultClassName: "rv-Group" });
+    const role = props.role ?? "group";
+    const slot = props.slot ?? undefined;
+    const ariaLabel = props["aria-label"];
+    const labelledBy = props["aria-labelledby"];
+    const describedBy = props["aria-describedby"];
+    const details = props["aria-details"];
+    // Read every prop up front: an element with a spread resumes as one binding over all its attributes.
+    const dom = globalDOMProps(props, OWNED);
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            id,
+            role,
+            slot,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "aria-label": ariaLabel,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            "aria-details": details,
+            "aria-disabled": () => attr(read(ariaDisabled)),
+            "aria-invalid": () => attr(read(ariaInvalid)),
+            "data-disabled": () => dataBool(isDisabled()),
+            "data-invalid": () => dataBool(isInvalid()),
+            "data-readonly": () => dataBool(read(isReadOnlyProp)),
+            onPointerEnter: (event) => {
+                hoverStateEnter(interaction, event);
+                onPointerEnter?.(event);
+            },
+            onPointerLeave: (event) => {
+                hoverStateLeave(interaction, event);
+                onPointerLeave?.(event);
+            },
+            onFocusIn: (event) => {
+                focusStateFocus(interaction, event);
+                onFocusIn?.(event);
+            },
+            onFocusOut: (event) => {
+                focusStateBlur(interaction, event);
+                onFocusOut?.(event);
+            },
+            onFocus,
+            onBlur,
+            onKeyDown,
+            onKeyUp,
+            children: () => rp.children(),
+        }, values);
+    return (<div {...dom} ref={ref} id={id} role={role} slot={slot} class={rp.class()} style={rp.style()} aria-label={ariaLabel} aria-labelledby={labelledBy} aria-describedby={describedBy} aria-details={details} aria-disabled={attr(read(ariaDisabled))} aria-invalid={attr(read(ariaInvalid))} data-disabled={dataBool(isDisabled())} data-invalid={dataBool(isInvalid())} data-readonly={dataBool(read(isReadOnlyProp))} onPointerOver={(event) => hoverStateOver(interaction, event)} onPointerEnter={onPointerEnter ? (event) => onPointerEnter(event) : undefined} onPointerLeave={onPointerLeave ? (event) => onPointerLeave(event) : undefined} onFocusIn={(event) => {
+            focusStateFocus(interaction, event);
+            onFocusIn?.(event);
+        }} onFocusOut={(event) => {
+            focusStateBlur(interaction, event);
+            onFocusOut?.(event);
+        }} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onKeyUp={onKeyUp}>
+      {rp.children()}
+    </div>);
+}

package/header/index.d.ts

@@ -0,0 +1,13 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type ContextValue, type HTMLProps, type RefValue, type SlotProps, type StyleObject } from "../slots/index.jsx";
+export interface HeaderProps extends HTMLProps<"header">, SlotProps, DOMRenderProps<"header", undefined> {
+    /** @default "rv-Header" */
+    class?: string;
+    style?: StyleObject;
+    ref?: RefValue<HTMLElement>;
+    /** Content; a function (not lazy JSX) is reactive content, rendered in a binding (e.g. a context-provided `children: () => title`). */
+    children?: Content | (() => Content);
+}
+export declare const HeaderContext: import("@rivetjs/reactivity").Context<ContextValue<HeaderProps, HTMLElement>>;
+export declare const Header: (props: HeaderProps) => unknown;

package/header/index.jsx

@@ -0,0 +1,34 @@
+// Ported from react-aria-components Header (packages/react-aria-components/src/Header.tsx), Apache-2.0, © Adobe.
+// Rivet: props merged with `HeaderContext` (`contextProps`); a collection leaf
+// (`createLeafComponent(HeaderNode, …)` from `../collections/components.tsx`): inside a collection host it
+// renders in place (live) or registers a header node (build mode). `render` (RAC DOMRenderProps): given, the attributes object (`ref`, `class`, `style`, `children`) goes to `render(attrs, undefined)` instead of the default element; the default path is the compiled element.
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { renderSlot } from "@rivetjs/runtime/slot";
+import { slotChildren } from "../utils/render.js";
+import { HeaderNode } from "../collections/base.js";
+import { createLeafComponent } from "../collections/components.jsx";
+import { resumableContext, contextProps } from "../slots/index.jsx";
+import { hasLive } from "../utils/live.jsx";
+import { liveElement } from "../utils/live-element.jsx";
+export const HeaderContext = resumableContext(createContext({}, { id: "rv-header" }));
+export const Header = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props, forwardedRef) {
+    const [merged, ref] = contextProps(props, forwardedRef, HeaderContext);
+    // Live props (P5): class / style / children live (one `Dynamic` element).
+    if (hasLive(merged) && !untrack(() => merged.render))
+        return untrack(() => liveElement(merged, ref, "header", "rv-Header"));
+    const { children, class: className, style, slot, render, ...domProps } = merged;
+    const cls = className ?? "rv-Header";
+    const s = slot ?? undefined;
+    if (render)
+        return render({
+            ...domProps,
+            style: (typeof style === "function" ? style() : style),
+            slot: s,
+            ref: ref,
+            class: cls,
+            children: slotChildren(children),
+        }, undefined);
+    return (<header {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={ref} class={cls}>
+      {renderSlot(children)}
+    </header>);
+});

package/heading/index.d.ts

@@ -0,0 +1,19 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type ContextValue, type HTMLProps, type RefValue, type SlotProps, type StyleObject } from "../slots/index.jsx";
+export interface HeadingProps extends HTMLProps<"h3">, SlotProps, DOMRenderProps<"h3", undefined> {
+    /** @default "rv-Heading" */
+    class?: string;
+    style?: StyleObject;
+    /**
+     * The heading level.
+     *
+     * @default 3
+     */
+    level?: number;
+    ref?: RefValue<HTMLHeadingElement>;
+    /** Content; a function (not lazy JSX) is reactive content, rendered in a binding (e.g. a context-provided `children: () => title`). */
+    children?: Content | (() => Content);
+}
+export declare const HeadingContext: import("@rivetjs/reactivity").Context<ContextValue<HeadingProps, HTMLHeadingElement>>;
+export declare function Heading(props: HeadingProps): unknown;

package/heading/index.jsx

@@ -0,0 +1,55 @@
+// Ported from react-aria-components Heading (packages/react-aria-components/src/Heading.tsx), Apache-2.0, © Adobe.
+// Rivet: props merged with `HeadingContext` (`contextProps`, slots: `<Heading slot="title">` in a Dialog);
+// one explicit branch per level (`h1`…`h6`: compiled templates). `render` (RAC DOMRenderProps): given, the attributes object (`ref`, `class`, `style`, `children`) goes to `render(attrs, undefined)` instead of the default element; the default path is the compiled element.
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { renderSlot } from "@rivetjs/runtime/slot";
+import { slotChildren } from "../utils/render.js";
+import { resumableContext, contextProps } from "../slots/index.jsx";
+import { hasLive } from "../utils/live.jsx";
+import { liveElement } from "../utils/live-element.jsx";
+export const HeadingContext = resumableContext(createContext({}, { id: "rv-heading" }));
+export function Heading(props) {
+    const [merged, ref] = contextProps(props, props.ref, HeadingContext);
+    // Live props (P5): class / style / children live (one `Dynamic` element); `level` read once.
+    if (hasLive(merged)) {
+        const live = untrack(() => (merged.render ? null : "h" + (merged.level ?? 3)));
+        if (live)
+            return untrack(() => liveElement(merged, ref, live, "rv-Heading", ["level"]));
+    }
+    const { children, level = 3, class: className, style, slot, render, ...domProps } = merged;
+    const cls = className ?? "rv-Heading";
+    const s = slot ?? undefined;
+    const r = ref;
+    if (render)
+        return render({
+            ...domProps,
+            style: (typeof style === "function" ? style() : style),
+            slot: s,
+            ref: r,
+            class: cls,
+            children: slotChildren(children),
+        }, undefined);
+    if (level === 1)
+        return (<h1 {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </h1>);
+    if (level === 2)
+        return (<h2 {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </h2>);
+    if (level === 4)
+        return (<h4 {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </h4>);
+    if (level === 5)
+        return (<h5 {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </h5>);
+    if (level === 6)
+        return (<h6 {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </h6>);
+    return (<h3 {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+      {renderSlot(children)}
+    </h3>);
+}

package/highlight/index.d.ts

@@ -0,0 +1,12 @@
+export type CodeTokenType = "plain" | "comment" | "string" | "number" | "keyword" | "literal" | "type" | "function" | "property" | "operator" | "punctuation" | "tag" | "attribute" | "variable" | "inserted" | "deleted" | "meta";
+export interface CodeToken {
+    type: CodeTokenType;
+    value: string;
+}
+export type CodeLanguage = "js" | "json" | "css" | "markup" | "shell" | "python" | "sql" | "yaml" | "diff" | "clike" | "plaintext";
+/** Tokenizer family for a language id / alias (`"ts"` → `"js"`); unknown ids → `"plaintext"`. */
+export declare function resolveLanguage(language: string | undefined): CodeLanguage;
+/** Display name for a language id (`"ts"` → `"TypeScript"`); unknown ids are returned as given. */
+export declare function languageLabel(language: string | undefined): string;
+/** Tokenize `code` for `language` (id or alias). Unknown languages give one plain token. */
+export declare function highlight(code: string, language?: string): CodeToken[];