@raylang/react 0.0.0-stage → 0.4.0

package/index.d.ts

@@ -0,0 +1,2180 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import type * as React from "react";
+import type * as Ray from "@raylang/elements";
+
+/** Wraps any custom element as a React component (props set as DOM properties, events by name). */
+export declare function createComponent<E extends HTMLElement = HTMLElement, P = {}>(
+  tagName: string,
+  options?: { properties?: string[]; events?: Record<string, string>; displayName?: string },
+): React.ForwardRefExoticComponent<P & Omit<React.HTMLAttributes<E>, keyof P> & { children?: React.ReactNode } & React.RefAttributes<E>>;
+
+export interface RayButtonOwnProps {
+  /** Visual style. raised: a physical key on a darker edge that sinks when pressed (mouse, touch or keyboard). */
+  variant?: "filled" | "light" | "outline" | "subtle" | "default" | "transparent" | "gradient" | "raised";
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient?: string;
+  /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Height, padding and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** submit/reset act on the enclosing form. */
+  type?: "button" | "submit" | "reset";
+  /** Not interactive (also when inside a disabled fieldset). */
+  disabled?: boolean;
+  /** Shows a spinner over the content and blocks clicks. */
+  loading?: boolean;
+  /** Takes the whole width of its container. */
+  fullWidth?: boolean;
+  /** Renders a link instead of a button. */
+  href?: string;
+  /** Link target, with href. */
+  target?: string;
+  /** With type=submit: submitted as name=value. */
+  name?: string;
+  /** With type=submit: the submitted value. */
+  value?: string;
+}
+export type RayButtonProps = RayButtonOwnProps & Omit<React.HTMLAttributes<Ray.RayButton>, keyof RayButtonOwnProps> & { children?: React.ReactNode };
+/** <ray-button> as a React component. */
+export declare const RayButton: React.ForwardRefExoticComponent<RayButtonProps & React.RefAttributes<Ray.RayButton>>;
+
+export interface RayButtonGroupOwnProps {
+  /** Direction of the group. */
+  orientation?: "horizontal" | "vertical";
+  /** Fills its container; the children share the width. */
+  fullWidth?: boolean;
+  /** Accessible name (aria-label). */
+  label?: string;
+}
+export type RayButtonGroupProps = RayButtonGroupOwnProps & Omit<React.HTMLAttributes<Ray.RayButtonGroup>, keyof RayButtonGroupOwnProps> & { children?: React.ReactNode };
+/** <ray-button-group> as a React component. */
+export declare const RayButtonGroup: React.ForwardRefExoticComponent<RayButtonGroupProps & React.RefAttributes<Ray.RayButtonGroup>>;
+
+export interface RayIconButtonOwnProps {
+  /** Accessible name and tooltip (required: the button has no text). */
+  label?: string;
+  /** Visual style. */
+  variant?: "filled" | "light" | "outline" | "subtle" | "default" | "transparent" | "gradient" | "raised";
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient?: string;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Width and height. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Shows a spinner instead of the icon. */
+  loading?: boolean;
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** submit/reset act on the enclosing form. */
+  type?: "button" | "submit" | "reset";
+  /** Takes the whole width of its container. */
+  fullWidth?: boolean;
+  /** Renders a link instead of a button. */
+  href?: string;
+  /** Link target, with href. */
+  target?: string;
+  /** With type=submit: submitted as name=value. */
+  name?: string;
+  /** With type=submit: the submitted value. */
+  value?: string;
+}
+export type RayIconButtonProps = RayIconButtonOwnProps & Omit<React.HTMLAttributes<Ray.RayIconButton>, keyof RayIconButtonOwnProps> & { children?: React.ReactNode };
+/** <ray-icon-button> as a React component. */
+export declare const RayIconButton: React.ForwardRefExoticComponent<RayIconButtonProps & React.RefAttributes<Ray.RayIconButton>>;
+
+export interface RayToggleOwnProps {
+  /** On. */
+  pressed?: boolean;
+  /** Look of "on": subtle (tint), outline (colored border + tint), light (muted → tint), filled (surface → solid color), raised (a key that latches down, lit). ray-button's default, transparent and gradient are left out: no distinct on state, or only a color change. */
+  variant?: "subtle" | "outline" | "light" | "filled" | "raised";
+  /** Square, for an icon alone (give it a label). */
+  square?: boolean;
+  /** Accessible name and tooltip, for icon-only toggles. */
+  label?: string;
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient?: string;
+  /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Height, padding and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** submit/reset act on the enclosing form. */
+  type?: "button" | "submit" | "reset";
+  /** Not interactive (also when inside a disabled fieldset). */
+  disabled?: boolean;
+  /** Shows a spinner over the content and blocks clicks. */
+  loading?: boolean;
+  /** Takes the whole width of its container. */
+  fullWidth?: boolean;
+  /** Renders a link instead of a button. */
+  href?: string;
+  /** Link target, with href. */
+  target?: string;
+  /** With type=submit: submitted as name=value. */
+  name?: string;
+  /** With type=submit: the submitted value. */
+  value?: string;
+  /** The user flipped it (read `pressed`). */
+  onChange?: (event: Event) => void;
+}
+export type RayToggleProps = RayToggleOwnProps & Omit<React.HTMLAttributes<Ray.RayToggle>, keyof RayToggleOwnProps> & { children?: React.ReactNode };
+/** <ray-toggle> as a React component. */
+export declare const RayToggle: React.ForwardRefExoticComponent<RayToggleProps & React.RefAttributes<Ray.RayToggle>>;
+
+export interface RayToggleGroupOwnProps {
+  /** single: choosing one turns the others off; multiple: each toggle is independent. */
+  type?: "single" | "multiple";
+  /** The selected key (single) or keys (multiple: an array, or a comma-separated attribute). */
+  value?: string | string[] | undefined;
+  /** Form field name: the value (multiple: one entry per key). */
+  name?: string;
+  /** Needs a value; with single the selected toggle cannot be turned off. */
+  required?: boolean;
+  /** Disables every toggle. */
+  disabled?: boolean;
+  /** Toggles apart, each with its own corners (default: joined). */
+  spaced?: boolean;
+  /** Variant of the toggles. */
+  variant?: "subtle" | "outline" | "light" | "filled" | "raised";
+  /** Color of the toggles' on state. */
+  color?: string;
+  /** Size of the toggles. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius of the toggles. */
+  radius?: string;
+  /** Square toggles, for icons. */
+  square?: boolean;
+  /** Direction of the group. */
+  orientation?: "horizontal" | "vertical";
+  /** Fills its container; the children share the width. */
+  fullWidth?: boolean;
+  /** Accessible name (aria-label). */
+  label?: string;
+  /** The user changed the selection (read `value` or `values`; the toggles' own change events stop at the group). */
+  onChange?: (event: Event) => void;
+}
+export type RayToggleGroupProps = RayToggleGroupOwnProps & Omit<React.HTMLAttributes<Ray.RayToggleGroup>, keyof RayToggleGroupOwnProps> & { children?: React.ReactNode };
+/** <ray-toggle-group> as a React component. */
+export declare const RayToggleGroup: React.ForwardRefExoticComponent<RayToggleGroupProps & React.RefAttributes<Ray.RayToggleGroup>>;
+
+export interface RayCheckboxOwnProps {
+  /** Current state. The checked attribute is the initial state (restored on reset). */
+  checked?: boolean;
+  /** Mixed state; cleared on the next user change. */
+  indeterminate?: boolean;
+  /** Submitted value when checked. */
+  value?: string;
+  /** Form field name. */
+  name?: string;
+  /** Label text (or put the label in the content). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text. */
+  error?: string;
+  /** Must be checked to submit. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Checked look: filled box, or colored border and mark. */
+  variant?: "filled" | "outline";
+  /** A palette color or any CSS color for the checked state. */
+  color?: string;
+  /** Box and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Side of the label. */
+  labelPosition?: "right" | "left";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** When the user toggles it. */
+  onChange?: (event: Event) => void;
+}
+export type RayCheckboxProps = RayCheckboxOwnProps & Omit<React.HTMLAttributes<Ray.RayCheckbox>, keyof RayCheckboxOwnProps> & { children?: React.ReactNode };
+/** <ray-checkbox> as a React component. */
+export declare const RayCheckbox: React.ForwardRefExoticComponent<RayCheckboxProps & React.RefAttributes<Ray.RayCheckbox>>;
+
+export interface RayCheckboxGroupOwnProps {
+  /** The checked values. The value attribute: "a,b". */
+  value?: string[];
+  /** Form field name. */
+  name?: string;
+  /** Group label (also its accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text. */
+  error?: string;
+  /** At least one must be checked. */
+  required?: boolean;
+  /** Disables every checkbox. */
+  disabled?: boolean;
+  /** At most this many: the others are disabled once reached; the label shows the count. */
+  max?: number;
+  /** Layout of the checkboxes. */
+  orientation?: "vertical" | "horizontal";
+  /** Size of the checkboxes that set none. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Color of the checkboxes that set none. */
+  color?: string;
+  /** The description before the checkboxes or after them. */
+  descriptionPosition?: "above" | "below";
+  /** The user checked or unchecked one (read value). */
+  onChange?: (event: Event) => void;
+  /** Same moment as change. */
+  onInput?: (event: Event) => void;
+}
+export type RayCheckboxGroupProps = RayCheckboxGroupOwnProps & Omit<React.HTMLAttributes<Ray.RayCheckboxGroup>, keyof RayCheckboxGroupOwnProps> & { children?: React.ReactNode };
+/** <ray-checkbox-group> as a React component. */
+export declare const RayCheckboxGroup: React.ForwardRefExoticComponent<RayCheckboxGroupProps & React.RefAttributes<Ray.RayCheckboxGroup>>;
+
+export interface RayColorPickerOwnProps {
+  /** The color, written in format. Any color is accepted and rewritten in format. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** How value is written: hex, hexa, rgb, rgba, hsl or hsla. Formats ending in a show the opacity slider. */
+  format?: Ray.ColorFormat;
+  /** Preset colors below the picker: an array, or a comma-separated list in the attribute (commas inside rgb()/hsl() are kept). */
+  swatches?: string | string[];
+  /** Swatches in each row. */
+  swatchesPerRow?: number;
+  /** Only the swatches: no area nor sliders. */
+  swatchesOnly?: boolean;
+  /** Width of the picker and size of its thumbs. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Takes the width of its container. */
+  fullWidth?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Accessible name of the whole picker. */
+  label?: string;
+  /** The color moved (every step of a drag). */
+  onInput?: (event: Event) => void;
+  /** The color settled: pointer released, a key pressed or a swatch chosen (read value). */
+  onChange?: (event: Event) => void;
+}
+export type RayColorPickerProps = RayColorPickerOwnProps & Omit<React.HTMLAttributes<Ray.RayColorPicker>, keyof RayColorPickerOwnProps> & { children?: React.ReactNode };
+/** <ray-color-picker> as a React component. */
+export declare const RayColorPicker: React.ForwardRefExoticComponent<RayColorPickerProps & React.RefAttributes<Ray.RayColorPicker>>;
+
+export interface RayColorInputOwnProps {
+  /** The color, written in format. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** How value is written: hex, hexa, rgb, rgba, hsl or hsla. */
+  format?: Ray.ColorFormat;
+  /** Preset colors in the dropdown (an array, or a comma-separated list). */
+  swatches?: string | string[];
+  /** Swatches in each row. */
+  swatchesPerRow?: number;
+  /** Shown while empty. */
+  placeholder?: string;
+  /** Hides the eyedropper button. */
+  hideEyedropper?: boolean;
+  /** The dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Label above the field. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error message; marks the field invalid. */
+  error?: string;
+  /** Must have a color. */
+  required?: boolean;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Field height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius: xs…xl or a CSS length. */
+  radius?: string;
+  /** Visual style of the field. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Where the description goes. */
+  descriptionPosition?: "above" | "below";
+  /** The color changed (typing a valid color, or moving the picker). */
+  onInput?: (event: Event) => void;
+  /** The color settled (picker released, a swatch, the eyedropper, or the field left with a new color). */
+  onChange?: (event: Event) => void;
+  /** The dropdown opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The dropdown closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayColorInputProps = RayColorInputOwnProps & Omit<React.HTMLAttributes<Ray.RayColorInput>, keyof RayColorInputOwnProps> & { children?: React.ReactNode };
+/** <ray-color-input> as a React component. */
+export declare const RayColorInput: React.ForwardRefExoticComponent<RayColorInputProps & React.RefAttributes<Ray.RayColorInput>>;
+
+export interface RayComboboxOwnProps {
+  /** The chosen value; an array with multiple. The value attribute: "a,b" with multiple. */
+  value?: string | string[];
+  /** Options instead of child <option>/<optgroup> elements. */
+  data?: Array<string | { value: string; label?: string; disabled?: boolean; group?: string }>;
+  /** Several values, shown as chips. */
+  multiple?: boolean;
+  /** Shown while empty. */
+  placeholder?: string;
+  /** What was typed can be added when no option matches it ("+ Create …"); fires ray-create. */
+  creatable?: boolean;
+  /** A button that clears the value. */
+  clearable?: boolean;
+  /** With multiple: at most this many. */
+  maxValues?: number;
+  /** At most this many options shown (large lists: keep typing). */
+  limit?: number;
+  /** Shown when nothing matches. */
+  nothingFound?: string;
+  /** The dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text; marks the field invalid. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** The value changed (read value). */
+  onChange?: (event: Event) => void;
+  /** Same moment as change. */
+  onInput?: (event: Event) => void;
+  /** A new value was created from the typed text. */
+  onRayCreate?: (event: CustomEvent<{ value: string }>) => void;
+  /** The dropdown opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The dropdown closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayComboboxProps = RayComboboxOwnProps & Omit<React.HTMLAttributes<Ray.RayCombobox>, keyof RayComboboxOwnProps> & { children?: React.ReactNode };
+/** <ray-combobox> as a React component. */
+export declare const RayCombobox: React.ForwardRefExoticComponent<RayComboboxProps & React.RefAttributes<Ray.RayCombobox>>;
+
+export interface RayDatePickerOwnProps {
+  /** The chosen date, ISO "YYYY-MM-DD" ("" for none). The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Earliest selectable date (ISO). Earlier days are disabled; an earlier value is invalid (rangeUnderflow). */
+  min?: string;
+  /** Latest selectable date (ISO). */
+  max?: string;
+  /** Shown while no date is chosen. */
+  placeholder?: string;
+  /** How the date is displayed (Intl dateStyle). */
+  format?: "short" | "medium" | "long" | "full";
+  /** Locale for names and formats. Default: the nearest lang attribute, else the browser's. */
+  locale?: string;
+  /** First day of the week, 0 (Sunday) to 6. Default: the locale's. */
+  firstDay?: number;
+  /** Shows a button that clears the date. */
+  clearable?: boolean;
+  /** The calendar dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** When the date changes (picked or cleared). */
+  onInput?: (event: Event) => void;
+  /** When the date changes (picked or cleared). */
+  onChange?: (event: Event) => void;
+  /** The calendar opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The calendar closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayDatePickerProps = RayDatePickerOwnProps & Omit<React.HTMLAttributes<Ray.RayDatePicker>, keyof RayDatePickerOwnProps> & { children?: React.ReactNode };
+/** <ray-date-picker> as a React component. */
+export declare const RayDatePicker: React.ForwardRefExoticComponent<RayDatePickerProps & React.RefAttributes<Ray.RayDatePicker>>;
+
+export interface RayCalendarOwnProps {
+  /** The selected date, ISO "YYYY-MM-DD". */
+  value?: string;
+  /** Earliest selectable date (ISO). */
+  min?: string;
+  /** Latest selectable date (ISO). */
+  max?: string;
+  /** Locale for month and weekday names. Default: the nearest lang attribute, else the browser's. */
+  locale?: string;
+  /** First day of the week, 0 (Sunday) to 6. Default: the locale's. */
+  firstDay?: number;
+  /** Day cell size and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** A day was selected (read `value`). */
+  onChange?: (event: Event) => void;
+}
+export type RayCalendarProps = RayCalendarOwnProps & Omit<React.HTMLAttributes<Ray.RayCalendar>, keyof RayCalendarOwnProps> & { children?: React.ReactNode };
+/** <ray-calendar> as a React component. */
+export declare const RayCalendar: React.ForwardRefExoticComponent<RayCalendarProps & React.RefAttributes<Ray.RayCalendar>>;
+
+export interface RayFileUploadOwnProps {
+  /** Form field name: every file is submitted under it. */
+  name?: string;
+  /** Label above the zone. */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** Error text (replaces the explanation of refused files). */
+  error?: string;
+  /** The form needs at least one file. */
+  required?: boolean;
+  /** No picking, dropping or removing. */
+  disabled?: boolean;
+  /** Accepted types, as in <input type=file>: ".pdf,.png", "image/*", "application/json". */
+  accept?: string;
+  /** Several files (else one, replaced by the next). */
+  multiple?: boolean;
+  /** Largest file: bytes or a size like "10 MB", "512 KB". */
+  maxSize?: string | number;
+  /** With multiple: the most files kept. */
+  maxFiles?: number;
+  /** Small text in the zone. Default: from accept, max-size and max-files ("PNG or PDF · up to 10 MB each · max. 5 files"). */
+  hint?: string;
+  /** Title of the zone, before "or browse". */
+  dropLabel?: string;
+  /** The link-styled word (the button text in compact). */
+  browseLabel?: string;
+  /** Title while files are dragged over it. */
+  activeLabel?: string;
+  /** Title on touch screens (no hover), where dragging files is rare. */
+  tapLabel?: string;
+  /** default: a tall centered zone; compact: one row with a Browse button. */
+  variant?: "default" | "compact";
+  /** How chosen files show: full-width rows, thumbnail cards, or not at all (render your own on change). */
+  list?: "rows" | "cards" | "none";
+  /** With a native host (ray-elements/core/raylang.js in a std/ui window), browsing opens the system dialog and gives paths (see `paths`); drop and paste still give Files. */
+  native?: boolean;
+  /** Accent of hover, drag and the browse link (default: primary). */
+  color?: string;
+  /** Files were added or removed (read `files`, and `lastChange` for which). */
+  onChange?: (event: Event) => void;
+  /** Some files were refused (type, size or count). */
+  onRayReject?: (event: CustomEvent<{ rejected: Ray.FileRejection[] }>) => void;
+  /** The native dialog failed (with `native`). */
+  onRayError?: (event: CustomEvent<{ error: Error }>) => void;
+}
+export type RayFileUploadProps = RayFileUploadOwnProps & Omit<React.HTMLAttributes<Ray.RayFileUpload>, keyof RayFileUploadOwnProps> & { children?: React.ReactNode };
+/** <ray-file-upload> as a React component. */
+export declare const RayFileUpload: React.ForwardRefExoticComponent<RayFileUploadProps & React.RefAttributes<Ray.RayFileUpload>>;
+
+export interface RayInputOwnProps {
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Input type. */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text; marks the field invalid (display only — does not block submit). */
+  error?: string;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Required for form submission; shows an asterisk. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Forwarded to the inner input. */
+  autocomplete?: string;
+  /** Virtual keyboard hint. */
+  inputmode?: string;
+  /** Validation pattern (regular expression). */
+  pattern?: string;
+  /** Minimum (number/date types). */
+  min?: string;
+  /** Maximum (number/date types). */
+  max?: string;
+  /** Step (number types). */
+  step?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** Mobile auto-capitalization. */
+  autocapitalize?: string;
+  /** Label of the Enter key on virtual keyboards. */
+  enterkeyhint?: string;
+  /** Id of a <datalist> with suggestions. */
+  list?: string;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed (blur, Enter). */
+  onChange?: (event: Event) => void;
+}
+export type RayInputProps = RayInputOwnProps & Omit<React.HTMLAttributes<Ray.RayInput>, keyof RayInputOwnProps> & { children?: React.ReactNode };
+/** <ray-input> as a React component. */
+export declare const RayInput: React.ForwardRefExoticComponent<RayInputProps & React.RefAttributes<Ray.RayInput>>;
+
+export interface RayNumberInputOwnProps {
+  /** The number (undefined when empty). */
+  value?: number;
+  /** Minimum. */
+  min?: number;
+  /** Maximum. */
+  max?: number;
+  /** What + and − add. */
+  step?: number;
+  /** Fixed decimals (2: 3 shows as 3.00). */
+  decimals?: number;
+  /** Shown before the number ("$"). */
+  prefix?: string | null;
+  /** Shown after the number (" kg", "%"). */
+  suffix?: string;
+  /** Groups thousands in the shown text (",", ".", " "). */
+  thousandsSeparator?: string;
+  /** The decimal mark shown and typed ("," in many locales). */
+  decimalSeparator?: string;
+  /** When out-of-range input is clamped: on blur, while typing, or never (then it is invalid). */
+  clamp?: "blur" | "strict" | "none";
+  /** No + and − buttons (the keys still step). */
+  hideControls?: boolean;
+  /** Shown while empty. */
+  placeholder?: string;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text; marks the field invalid. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** On every change of the value (typing, keys, buttons). */
+  onInput?: (event: Event) => void;
+  /** When the value is committed (blur, a step). */
+  onChange?: (event: Event) => void;
+}
+export type RayNumberInputProps = RayNumberInputOwnProps & Omit<React.HTMLAttributes<Ray.RayNumberInput>, keyof RayNumberInputOwnProps> & { children?: React.ReactNode };
+/** <ray-number-input> as a React component. */
+export declare const RayNumberInput: React.ForwardRefExoticComponent<RayNumberInputProps & React.RefAttributes<Ray.RayNumberInput>>;
+
+export interface RayPasswordInputOwnProps {
+  /** The password is shown as text. */
+  visible?: boolean;
+  /** Accessible name of the toggle while hidden. */
+  showLabel?: string;
+  /** Accessible name of the toggle while shown. */
+  hideLabel?: string;
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Input type. */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text; marks the field invalid (display only — does not block submit). */
+  error?: string;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Required for form submission; shows an asterisk. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Forwarded to the inner input. */
+  autocomplete?: string;
+  /** Virtual keyboard hint. */
+  inputmode?: string;
+  /** Validation pattern (regular expression). */
+  pattern?: string;
+  /** Minimum (number/date types). */
+  min?: string;
+  /** Maximum (number/date types). */
+  max?: string;
+  /** Step (number types). */
+  step?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** Mobile auto-capitalization. */
+  autocapitalize?: string;
+  /** Label of the Enter key on virtual keyboards. */
+  enterkeyhint?: string;
+  /** Id of a <datalist> with suggestions. */
+  list?: string;
+  /** The user showed or hid the password. */
+  onRayVisibilityChange?: (event: CustomEvent<{ visible: boolean }>) => void;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed (blur, Enter). */
+  onChange?: (event: Event) => void;
+}
+export type RayPasswordInputProps = RayPasswordInputOwnProps & Omit<React.HTMLAttributes<Ray.RayPasswordInput>, keyof RayPasswordInputOwnProps> & { children?: React.ReactNode };
+/** <ray-password-input> as a React component. */
+export declare const RayPasswordInput: React.ForwardRefExoticComponent<RayPasswordInputProps & React.RefAttributes<Ray.RayPasswordInput>>;
+
+export interface RayPathInputOwnProps {
+  /** What the dialog chooses: an existing file, a folder, or a file to save (the current name is suggested). */
+  mode?: "open" | "folder" | "save";
+  /** File types the dialog offers, as in <input type=file>: ".json,.toml", "image/*" (ignored for folders). */
+  accept?: string;
+  /** Text of the button. */
+  browseLabel?: string;
+  /** Title of the system dialog (default: the label). */
+  dialogTitle?: string;
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Input type. */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text; marks the field invalid (display only — does not block submit). */
+  error?: string;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Required for form submission; shows an asterisk. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Forwarded to the inner input. */
+  autocomplete?: string;
+  /** Virtual keyboard hint. */
+  inputmode?: string;
+  /** Validation pattern (regular expression). */
+  pattern?: string;
+  /** Minimum (number/date types). */
+  min?: string;
+  /** Maximum (number/date types). */
+  max?: string;
+  /** Step (number types). */
+  step?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** Mobile auto-capitalization. */
+  autocapitalize?: string;
+  /** Label of the Enter key on virtual keyboards. */
+  enterkeyhint?: string;
+  /** Id of a <datalist> with suggestions. */
+  list?: string;
+  /** The path changed: typed and committed, or chosen in the dialog. */
+  onChange?: (event: Event) => void;
+  /** The system dialog failed. */
+  onRayError?: (event: CustomEvent<{ error: Error }>) => void;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+}
+export type RayPathInputProps = RayPathInputOwnProps & Omit<React.HTMLAttributes<Ray.RayPathInput>, keyof RayPathInputOwnProps> & { children?: React.ReactNode };
+/** <ray-path-input> as a React component. */
+export declare const RayPathInput: React.ForwardRefExoticComponent<RayPathInputProps & React.RefAttributes<Ray.RayPathInput>>;
+
+export interface RayRadioGroupOwnProps {
+  /** Value of the checked radio. Initial: the value attribute, or a radio with the checked attribute. */
+  value?: string;
+  /** Form field name. */
+  name?: string;
+  /** Group label (also its accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text. */
+  error?: string;
+  /** A choice is needed to submit. */
+  required?: boolean;
+  /** Disables every radio. */
+  disabled?: boolean;
+  /** Layout of the radios. */
+  orientation?: "vertical" | "horizontal";
+  /** Size of every radio. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Checked color of every radio. */
+  color?: string;
+  /** Checked look of every radio: filled circle, or colored ring and dot. */
+  variant?: "filled" | "outline";
+  /** When the user picks a radio. */
+  onInput?: (event: Event) => void;
+  /** When the user picks a radio. */
+  onChange?: (event: Event) => void;
+}
+export type RayRadioGroupProps = RayRadioGroupOwnProps & Omit<React.HTMLAttributes<Ray.RayRadioGroup>, keyof RayRadioGroupOwnProps> & { children?: React.ReactNode };
+/** <ray-radio-group> as a React component. */
+export declare const RayRadioGroup: React.ForwardRefExoticComponent<RayRadioGroupProps & React.RefAttributes<Ray.RayRadioGroup>>;
+
+export interface RayRadioOwnProps {
+  /** Value given to the group when chosen. */
+  value?: string;
+  /** Label text (or the content). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** Cannot be chosen. */
+  disabled?: boolean;
+  /** Overrides the group color. */
+  color?: string;
+  /** Overrides the group size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Overrides the group variant. */
+  variant?: "filled" | "outline";
+}
+export type RayRadioProps = RayRadioOwnProps & Omit<React.HTMLAttributes<Ray.RayRadio>, keyof RayRadioOwnProps> & { children?: React.ReactNode };
+/** <ray-radio> as a React component. */
+export declare const RayRadio: React.ForwardRefExoticComponent<RayRadioProps & React.RefAttributes<Ray.RayRadio>>;
+
+export interface RaySearchOwnProps {
+  /** Current text. */
+  value?: string;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Keyboard shortcut that focuses it ("mod+k", "/"; mod = ⌘ on macOS, Ctrl elsewhere). Shown as a hint while empty. */
+  shortcut?: string;
+  /** Milliseconds of quiet typing before ray-search fires (0: on every keystroke). */
+  debounce?: number;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). Without it, use aria-label. */
+  label?: string;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Help text. */
+  description?: string;
+  /** Error text; marks the field invalid. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** After `debounce` ms without typing, on Enter, and when cleared. */
+  onRaySearch?: (event: CustomEvent<{ value: string }>) => void;
+}
+export type RaySearchProps = RaySearchOwnProps & Omit<React.HTMLAttributes<Ray.RaySearch>, keyof RaySearchOwnProps> & { children?: React.ReactNode };
+/** <ray-search> as a React component. */
+export declare const RaySearch: React.ForwardRefExoticComponent<RaySearchProps & React.RefAttributes<Ray.RaySearch>>;
+
+export interface RaySegmentedControlOwnProps {
+  /** Selected value (default: the first enabled option). */
+  value?: string;
+  /** Options as strings or { value, label, disabled }. */
+  data?: Array<string | { value: string; label?: string; disabled?: boolean }>;
+  /** Form field name. */
+  name?: string;
+  /** Indicator color (default: a raised neutral segment). */
+  color?: string;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Takes the whole width. */
+  fullWidth?: boolean;
+  /** Direction. */
+  orientation?: "horizontal" | "vertical";
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** The user picked another option. */
+  onInput?: (event: Event) => void;
+  /** The user picked another option. */
+  onChange?: (event: Event) => void;
+}
+export type RaySegmentedControlProps = RaySegmentedControlOwnProps & Omit<React.HTMLAttributes<Ray.RaySegmentedControl>, keyof RaySegmentedControlOwnProps> & { children?: React.ReactNode };
+/** <ray-segmented-control> as a React component. */
+export declare const RaySegmentedControl: React.ForwardRefExoticComponent<RaySegmentedControlProps & React.RefAttributes<Ray.RaySegmentedControl>>;
+
+export interface RaySelectOwnProps {
+  /** Selected value. */
+  value?: string;
+  /** Options as strings or { value, label, disabled } (instead of child options). */
+  data?: Array<string | { value: string; label?: string; disabled?: boolean }>;
+  /** Shown while nothing is selected (with required, blocks submit). */
+  placeholder?: string;
+  /** The dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** When the selection changes. */
+  onInput?: (event: Event) => void;
+  /** When the selection changes. */
+  onChange?: (event: Event) => void;
+  /** The dropdown opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The dropdown closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RaySelectProps = RaySelectOwnProps & Omit<React.HTMLAttributes<Ray.RaySelect>, keyof RaySelectOwnProps> & { children?: React.ReactNode };
+/** <ray-select> as a React component. */
+export declare const RaySelect: React.ForwardRefExoticComponent<RaySelectProps & React.RefAttributes<Ray.RaySelect>>;
+
+export interface RaySliderOwnProps {
+  /** Current value. The value attribute is the initial one (restored on reset). */
+  value?: number;
+  /** Minimum. */
+  min?: number;
+  /** Maximum. */
+  max?: number;
+  /** Step. */
+  step?: number;
+  /** Form field name. */
+  name?: string;
+  /** Visible label. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text. */
+  error?: string;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Track and thumb color. */
+  color?: string;
+  /** Track and thumb size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Shows the value next to the label. */
+  showValue?: boolean;
+  /** Appended to the shown value and its spoken text (%, px, ms…). */
+  unit?: string;
+  /** Labeled ticks under the track. */
+  marks?: Array<number | { value: number; label?: string }>;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** While dragging. */
+  onInput?: (event: Event) => void;
+  /** When released. */
+  onChange?: (event: Event) => void;
+}
+export type RaySliderProps = RaySliderOwnProps & Omit<React.HTMLAttributes<Ray.RaySlider>, keyof RaySliderOwnProps> & { children?: React.ReactNode };
+/** <ray-slider> as a React component. */
+export declare const RaySlider: React.ForwardRefExoticComponent<RaySliderProps & React.RefAttributes<Ray.RaySlider>>;
+
+export interface RaySwitchOwnProps {
+  /** Current state. The checked attribute is the initial state. */
+  checked?: boolean;
+  /** Submitted value when on. */
+  value?: string;
+  /** Form field name. */
+  name?: string;
+  /** Label text (or the content). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text. */
+  error?: string;
+  /** Side of the label. */
+  labelPosition?: "right" | "left";
+  /** Track color when on. */
+  color?: string;
+  /** Track size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Mixed state; cleared on the next user change. */
+  indeterminate?: boolean;
+  /** Must be checked to submit. */
+  required?: boolean;
+  /** Checked look: filled box, or colored border and mark. */
+  variant?: "filled" | "outline";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** When the user toggles it. */
+  onChange?: (event: Event) => void;
+}
+export type RaySwitchProps = RaySwitchOwnProps & Omit<React.HTMLAttributes<Ray.RaySwitch>, keyof RaySwitchOwnProps> & { children?: React.ReactNode };
+/** <ray-switch> as a React component. */
+export declare const RaySwitch: React.ForwardRefExoticComponent<RaySwitchProps & React.RefAttributes<Ray.RaySwitch>>;
+
+export interface RayTextareaOwnProps {
+  /** Current value. */
+  value?: string;
+  /** Visible rows (minimum when autosize). */
+  rows?: number;
+  /** Grows with the content. */
+  autosize?: boolean;
+  /** With autosize: stop growing and scroll after this many rows. */
+  maxRows?: number;
+  /** Form field name. */
+  name?: string;
+  /** Visible label. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition?: "above" | "below";
+  /** Error text. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Forwarded to the inner textarea. */
+  autocomplete?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** soft or hard. */
+  wrap?: string;
+  /** On every edit. */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed. */
+  onChange?: (event: Event) => void;
+}
+export type RayTextareaProps = RayTextareaOwnProps & Omit<React.HTMLAttributes<Ray.RayTextarea>, keyof RayTextareaOwnProps> & { children?: React.ReactNode };
+/** <ray-textarea> as a React component. */
+export declare const RayTextarea: React.ForwardRefExoticComponent<RayTextareaProps & React.RefAttributes<Ray.RayTextarea>>;
+
+export interface RayBottomNavOwnProps {
+  /** The current destination (an item's value, else its href, else its label). */
+  value?: string;
+  /** Accessible name of the navigation. */
+  label?: string;
+  /** Which labels show (the others stay for assistive technology). */
+  labels?: "always" | "active" | "never";
+  /** How the current destination is marked besides its color. */
+  indicator?: "pill" | "line" | "none";
+  /** A palette color or any CSS color for the current item and the action (default: primary). */
+  color?: string;
+  /** default: a bar across the bottom; floating: a rounded bar off the edges. */
+  variant?: "default" | "floating";
+  /** Slides away while the content scrolls down, back on the way up. */
+  hideOnScroll?: boolean;
+  /** Pinned to the bottom of the window (outside a shell). */
+  fixed?: boolean;
+  /** A selector of the element whose scrolling it follows (default: its shell's, else the window). */
+  scrollTarget?: string;
+  /** The user picked another destination (read value). */
+  onChange?: (event: Event) => void;
+  /** An action item was pressed. */
+  onRaySelect?: (event: CustomEvent<{ value: string }>) => void;
+}
+export type RayBottomNavProps = RayBottomNavOwnProps & Omit<React.HTMLAttributes<Ray.RayBottomNav>, keyof RayBottomNavOwnProps> & { children?: React.ReactNode };
+/** <ray-bottom-nav> as a React component. */
+export declare const RayBottomNav: React.ForwardRefExoticComponent<RayBottomNavProps & React.RefAttributes<Ray.RayBottomNav>>;
+
+export interface RayBottomNavItemOwnProps {
+  /** Its value (default: its href, else its label). */
+  value?: string;
+  /** The label. */
+  label?: string;
+  /** An icon of the registry (or put one in the icon slot). */
+  icon?: string;
+  /** Makes it a link. */
+  href?: string;
+  /** A count or a short text on the icon. */
+  badge?: string;
+  /** A dot on the icon (something new). */
+  dot?: boolean;
+  /** Set by the bar: the current destination. */
+  active?: boolean;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** A raised round button ("New"): it fires ray-select on the bar, it is not a destination. */
+  action?: boolean;
+}
+export type RayBottomNavItemProps = RayBottomNavItemOwnProps & Omit<React.HTMLAttributes<Ray.RayBottomNavItem>, keyof RayBottomNavItemOwnProps> & { children?: React.ReactNode };
+/** <ray-bottom-nav-item> as a React component. */
+export declare const RayBottomNavItem: React.ForwardRefExoticComponent<RayBottomNavItemProps & React.RefAttributes<Ray.RayBottomNavItem>>;
+
+export interface RayBreadcrumbsOwnProps {
+  /** Text between crumbs ("/", "›", "·") or "chevron" (an icon). */
+  separator?: string;
+  /** Longer paths show the first crumb, "…" (a button that expands them) and the last max-items − 1. */
+  maxItems?: number;
+  /** Accessible name of the nav. */
+  label?: string;
+  /** Font size. */
+  size?: "xs" | "sm" | "md" | "lg";
+}
+export type RayBreadcrumbsProps = RayBreadcrumbsOwnProps & Omit<React.HTMLAttributes<Ray.RayBreadcrumbs>, keyof RayBreadcrumbsOwnProps> & { children?: React.ReactNode };
+/** <ray-breadcrumbs> as a React component. */
+export declare const RayBreadcrumbs: React.ForwardRefExoticComponent<RayBreadcrumbsProps & React.RefAttributes<Ray.RayBreadcrumbs>>;
+
+export interface RayBreadcrumbOwnProps {
+  /** Where it leads. */
+  href?: string;
+  /** This crumb is the current page (default: the last). */
+  current?: boolean;
+}
+export type RayBreadcrumbProps = RayBreadcrumbOwnProps & Omit<React.HTMLAttributes<Ray.RayBreadcrumb>, keyof RayBreadcrumbOwnProps> & { children?: React.ReactNode };
+/** <ray-breadcrumb> as a React component. */
+export declare const RayBreadcrumb: React.ForwardRefExoticComponent<RayBreadcrumbProps & React.RefAttributes<Ray.RayBreadcrumb>>;
+
+export interface RayNavLinkOwnProps {
+  /** Text. */
+  label?: string;
+  /** Second line. */
+  description?: string;
+  /** Makes it a link (ignored when it has nested links). */
+  href?: string;
+  /** The current page or section. */
+  active?: boolean;
+  /** Nested links are shown. */
+  opened?: boolean;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Style of the active state. */
+  variant?: "light" | "filled" | "subtle";
+  /** Active color. */
+  color?: string;
+  /** Only the icon (left section), centered; the label becomes its accessible name and tooltip. A collapsed ray-sidebar sets it. */
+  iconOnly?: boolean;
+  /** Nested links were shown or hidden. */
+  onRayToggle?: (event: CustomEvent<{ opened: boolean }>) => void;
+}
+export type RayNavLinkProps = RayNavLinkOwnProps & Omit<React.HTMLAttributes<Ray.RayNavLink>, keyof RayNavLinkOwnProps> & { children?: React.ReactNode };
+/** <ray-nav-link> as a React component. */
+export declare const RayNavLink: React.ForwardRefExoticComponent<RayNavLinkProps & React.RefAttributes<Ray.RayNavLink>>;
+
+export interface RayPaginationOwnProps {
+  /** Number of pages. */
+  total?: number;
+  /** Current page (1-based). */
+  value?: number;
+  /** Pages shown on each side of the current one. */
+  siblings?: number;
+  /** Pages always shown at the start and the end. */
+  boundaries?: number;
+  /** Adds first/last page buttons. */
+  withEdges?: boolean;
+  /** Hides the previous/next (and first/last) buttons. */
+  hideControls?: boolean;
+  /** Color of the current page: a palette color or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Item size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius of the items. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Accessible name of the navigation landmark. */
+  label?: string;
+  /** The user went to another page (read `value`). */
+  onChange?: (event: Event) => void;
+}
+export type RayPaginationProps = RayPaginationOwnProps & Omit<React.HTMLAttributes<Ray.RayPagination>, keyof RayPaginationOwnProps> & { children?: React.ReactNode };
+/** <ray-pagination> as a React component. */
+export declare const RayPagination: React.ForwardRefExoticComponent<RayPaginationProps & React.RefAttributes<Ray.RayPagination>>;
+
+export interface RaySidebarOwnProps {
+  /** Wide screens: an icon rail instead of the full panel. */
+  collapsed?: boolean;
+  /** Narrow screens: the drawer is shown (modal, focus trapped; Escape, backdrop click or a followed link close it). */
+  open?: boolean;
+  /** The edge it sits on. */
+  side?: "left" | "right";
+  /** A panel against the edge, or a floating card with a margin. */
+  variant?: "sidebar" | "floating";
+  /** Width when expanded (CSS length). Default 16rem. */
+  width?: string;
+  /** Width of the icon rail. Default 3.5rem. */
+  collapsedWidth?: string;
+  /** At this viewport width and below, it becomes a drawer. */
+  breakpoint?: string;
+  /** Accessible name of its navigation. */
+  label?: string;
+  /** After toggle(). */
+  onRayToggle?: (event: CustomEvent<{ collapsed: boolean; open: boolean; mobile: boolean }>) => void;
+  /** The drawer opened (narrow screens). */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The drawer closed (narrow screens). */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RaySidebarProps = RaySidebarOwnProps & Omit<React.HTMLAttributes<Ray.RaySidebar>, keyof RaySidebarOwnProps> & { children?: React.ReactNode };
+/** <ray-sidebar> as a React component. */
+export declare const RaySidebar: React.ForwardRefExoticComponent<RaySidebarProps & React.RefAttributes<Ray.RaySidebar>>;
+
+export interface RaySidebarGroupOwnProps {
+  /** Section title. */
+  label?: string;
+}
+export type RaySidebarGroupProps = RaySidebarGroupOwnProps & Omit<React.HTMLAttributes<Ray.RaySidebarGroup>, keyof RaySidebarGroupOwnProps> & { children?: React.ReactNode };
+/** <ray-sidebar-group> as a React component. */
+export declare const RaySidebarGroup: React.ForwardRefExoticComponent<RaySidebarGroupProps & React.RefAttributes<Ray.RaySidebarGroup>>;
+
+export interface RayStepperOwnProps {
+  /** Index of the active step (steps.length: completed). */
+  active?: number;
+  /** Steps in a row above the content, or in a column beside it. */
+  orientation?: "horizontal" | "vertical";
+  /** Label beside the number, or under it (narrow screens, many steps). */
+  iconPosition?: "left" | "top";
+  /** Completed steps are buttons that go back to them. */
+  allowStepSelect?: boolean;
+  /** With allow-step-select off, false lets the user jump to any step. */
+  linear?: boolean;
+  /** Size of the numbers. */
+  size?: "sm" | "md" | "lg";
+  /** A palette color or any CSS color for active and completed steps (default: primary). */
+  color?: string;
+  /** Accessible name of the list of steps. */
+  label?: string;
+  /** active changed by the user (a step clicked, next(), prev()). */
+  onChange?: (event: Event) => void;
+}
+export type RayStepperProps = RayStepperOwnProps & Omit<React.HTMLAttributes<Ray.RayStepper>, keyof RayStepperOwnProps> & { children?: React.ReactNode };
+/** <ray-stepper> as a React component. */
+export declare const RayStepper: React.ForwardRefExoticComponent<RayStepperProps & React.RefAttributes<Ray.RayStepper>>;
+
+export interface RayStepOwnProps {
+  /** The label. */
+  label?: string;
+  /** A line under the label. */
+  description?: string;
+  /** An icon instead of the number. */
+  icon?: string;
+  /** The icon once done (default: check). */
+  completedIcon?: string;
+  /** A spinner instead of the number. */
+  loading?: boolean;
+  /** An error message: red step, the message as its description. */
+  error?: string;
+  /** Cannot be selected. */
+  disabled?: boolean;
+}
+export type RayStepProps = RayStepOwnProps & Omit<React.HTMLAttributes<Ray.RayStep>, keyof RayStepOwnProps> & { children?: React.ReactNode };
+/** <ray-step> as a React component. */
+export declare const RayStep: React.ForwardRefExoticComponent<RayStepProps & React.RefAttributes<Ray.RayStep>>;
+
+export interface RayTabsOwnProps {
+  /** Value of the active tab (default: the first enabled one). */
+  value?: string;
+  /** Tab style. */
+  variant?: "default" | "outline" | "pills";
+  /** Tab list direction (and arrow keys). */
+  orientation?: "horizontal" | "vertical";
+  /** Active indicator color. */
+  color?: string;
+  /** manual: arrows move focus, Enter/Space activates. */
+  activation?: "auto" | "manual";
+  /** Tabs share the full width. */
+  grow?: boolean;
+  /** The user activated another tab. */
+  onChange?: (event: Event) => void;
+}
+export type RayTabsProps = RayTabsOwnProps & Omit<React.HTMLAttributes<Ray.RayTabs>, keyof RayTabsOwnProps> & { children?: React.ReactNode };
+/** <ray-tabs> as a React component. */
+export declare const RayTabs: React.ForwardRefExoticComponent<RayTabsProps & React.RefAttributes<Ray.RayTabs>>;
+
+export interface RayTabOwnProps {
+  /** Matches a ray-tab-panel's value. */
+  value?: string;
+  /** Cannot be activated. */
+  disabled?: boolean;
+}
+export type RayTabProps = RayTabOwnProps & Omit<React.HTMLAttributes<Ray.RayTab>, keyof RayTabOwnProps> & { children?: React.ReactNode };
+/** <ray-tab> as a React component. */
+export declare const RayTab: React.ForwardRefExoticComponent<RayTabProps & React.RefAttributes<Ray.RayTab>>;
+
+export interface RayTabPanelOwnProps {
+  /** Matches a ray-tab's value. */
+  value?: string;
+}
+export type RayTabPanelProps = RayTabPanelOwnProps & Omit<React.HTMLAttributes<Ray.RayTabPanel>, keyof RayTabPanelOwnProps> & { children?: React.ReactNode };
+/** <ray-tab-panel> as a React component. */
+export declare const RayTabPanel: React.ForwardRefExoticComponent<RayTabPanelProps & React.RefAttributes<Ray.RayTabPanel>>;
+
+export interface RayCommandPaletteOwnProps {
+  /** Shown. */
+  open?: boolean;
+  /** The actions. */
+  actions?: Ray.CommandAction[];
+  /** The search text. */
+  query?: string;
+  /** Placeholder of the search field. */
+  placeholder?: string;
+  /** Toggle shortcut (mod = ⌘ on macOS, Ctrl elsewhere); empty to disable. */
+  hotkey?: string;
+  /** Maximum results. */
+  limit?: number;
+  /** Text without results. */
+  emptyLabel?: string;
+  /** Accessible name. */
+  label?: string;
+  /** No keyboard hint at the bottom. */
+  hideHint?: boolean;
+  /** With a native host (ray-elements/core/raylang.js in a std/ui window, menus declared with elements/bridge), also lists the app's menu bar, grouped by menu with its shortcuts; running one gives the program the menu's own event. */
+  nativeMenus?: boolean;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur?: string;
+  /** An action was run. */
+  onRaySelect?: (event: CustomEvent<{ action: Ray.CommandAction }>) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayCommandPaletteProps = RayCommandPaletteOwnProps & Omit<React.HTMLAttributes<Ray.RayCommandPalette>, keyof RayCommandPaletteOwnProps> & { children?: React.ReactNode };
+/** <ray-command-palette> as a React component. */
+export declare const RayCommandPalette: React.ForwardRefExoticComponent<RayCommandPaletteProps & React.RefAttributes<Ray.RayCommandPalette>>;
+
+export interface RayDialogOwnProps {
+  /** Shown as a modal. */
+  open?: boolean;
+  /** Heading (also the dialog's accessible name). */
+  label?: string;
+  /** A line under the title (the dialog's accessible description). */
+  description?: string;
+  /** Width: xs…xl, full (the whole window), or any CSS length; a percentage is of the window (70% = 70vw, at least 40rem). Never wider than the window. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {});
+  /** Fixed height (the body scrolls): any CSS length; a percentage is of the window (70% = 70dvh, at least 30rem). Never taller than the window. Default: as tall as the content, up to the window. */
+  height?: string;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: lg. */
+  radius?: string;
+  /** Vertical placement. */
+  position?: "center" | "top";
+  /** Escape and backdrop clicks do not close it (the × still does; hide it with hide-close). To allow only one of them, cancel ray-request-close by its source. */
+  persistent?: boolean;
+  /** No close button in the header. */
+  hideClose?: boolean;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur?: string;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed; detail: { returnValue }. */
+  onRayClose?: (event: CustomEvent<{ returnValue: string }>) => void;
+  /** Escape, backdrop or close button; cancelable (preventDefault keeps it open). detail: { source }. */
+  onRayRequestClose?: (event: CustomEvent<{ source: "escape" | "backdrop" | "button" }>) => void;
+}
+export type RayDialogProps = RayDialogOwnProps & Omit<React.HTMLAttributes<Ray.RayDialog>, keyof RayDialogOwnProps> & { children?: React.ReactNode };
+/** <ray-dialog> as a React component. */
+export declare const RayDialog: React.ForwardRefExoticComponent<RayDialogProps & React.RefAttributes<Ray.RayDialog>>;
+
+export interface RayDrawerOwnProps {
+  /** Shown. */
+  open?: boolean;
+  /** Heading (also the accessible name). */
+  label?: string;
+  /** A line under the title (the drawer's accessible description). */
+  description?: string;
+  /** The edge it slides from. */
+  position?: "right" | "left" | "top" | "bottom";
+  /** Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {});
+  /** No backdrop nor scroll lock: the page stays interactive (a side panel). */
+  modeless?: boolean;
+  /** Detached from the edge, with rounded corners. */
+  floating?: boolean;
+  /** Escape and backdrop clicks do not close it. */
+  persistent?: boolean;
+  /** No close button in the header. */
+  hideClose?: boolean;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur?: string;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed; detail: { returnValue }. */
+  onRayClose?: (event: CustomEvent<{ returnValue: string }>) => void;
+  /** Escape, backdrop or close button; cancelable. */
+  onRayRequestClose?: (event: CustomEvent<{ source: "escape" | "backdrop" | "button" }>) => void;
+}
+export type RayDrawerProps = RayDrawerOwnProps & Omit<React.HTMLAttributes<Ray.RayDrawer>, keyof RayDrawerOwnProps> & { children?: React.ReactNode };
+/** <ray-drawer> as a React component. */
+export declare const RayDrawer: React.ForwardRefExoticComponent<RayDrawerProps & React.RefAttributes<Ray.RayDrawer>>;
+
+export interface RayMenuOwnProps {
+  /** Shown. */
+  open?: boolean;
+  /** Preferred side and alignment. */
+  placement?: "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "left-start";
+  /** Opens on right click (contextmenu) over the trigger area, at the pointer. */
+  context?: boolean;
+  /** Choosing an item does not close the menu. */
+  keepOpen?: boolean;
+  /** With a native host (ray-elements/core/raylang.js in a std/ui window), opens as the system's context menu at the pointer: items and dividers, same ray-select. */
+  native?: boolean;
+  /** Gap to the anchor in px. */
+  offset?: number;
+  /** An item was chosen; detail: { value, item }. */
+  onRaySelect?: (event: CustomEvent<{ value: string; item: Ray.RayMenuItem }>) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayMenuProps = RayMenuOwnProps & Omit<React.HTMLAttributes<Ray.RayMenu>, keyof RayMenuOwnProps> & { children?: React.ReactNode };
+/** <ray-menu> as a React component. */
+export declare const RayMenu: React.ForwardRefExoticComponent<RayMenuProps & React.RefAttributes<Ray.RayMenu>>;
+
+export interface RayMenuItemOwnProps {
+  /** Reported in ray-select (default: the text). */
+  value?: string;
+  /** Skipped by the keyboard, cannot be chosen. */
+  disabled?: boolean;
+  /** Text and hover color (e.g. red for destructive actions). */
+  color?: string;
+}
+export type RayMenuItemProps = RayMenuItemOwnProps & Omit<React.HTMLAttributes<Ray.RayMenuItem>, keyof RayMenuItemOwnProps> & { children?: React.ReactNode };
+/** <ray-menu-item> as a React component. */
+export declare const RayMenuItem: React.ForwardRefExoticComponent<RayMenuItemProps & React.RefAttributes<Ray.RayMenuItem>>;
+
+export interface RayMenuLabelOwnProps {
+}
+export type RayMenuLabelProps = RayMenuLabelOwnProps & Omit<React.HTMLAttributes<Ray.RayMenuLabel>, keyof RayMenuLabelOwnProps> & { children?: React.ReactNode };
+/** <ray-menu-label> as a React component. */
+export declare const RayMenuLabel: React.ForwardRefExoticComponent<RayMenuLabelProps & React.RefAttributes<Ray.RayMenuLabel>>;
+
+export interface RayMenuDividerOwnProps {
+}
+export type RayMenuDividerProps = RayMenuDividerOwnProps & Omit<React.HTMLAttributes<Ray.RayMenuDivider>, keyof RayMenuDividerOwnProps> & { children?: React.ReactNode };
+/** <ray-menu-divider> as a React component. */
+export declare const RayMenuDivider: React.ForwardRefExoticComponent<RayMenuDividerProps & React.RefAttributes<Ray.RayMenuDivider>>;
+
+export interface RayPopoverOwnProps {
+  /** Shown. */
+  open?: boolean;
+  /** Preferred side and alignment. */
+  placement?: "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+  /** Gap to the trigger in px. */
+  offset?: number;
+  /** Panel width (px number or CSS length). Default: its content. */
+  width?: string;
+  /** At least as wide as the trigger. */
+  matchWidth?: boolean;
+  /** Panel padding. */
+  padding?: "0" | "xs" | "sm" | "md" | "lg";
+  /** Moves focus into the panel when opened and keeps Tab inside it. */
+  trapFocus?: boolean;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed (also by Escape or an outside click). */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayPopoverProps = RayPopoverOwnProps & Omit<React.HTMLAttributes<Ray.RayPopover>, keyof RayPopoverOwnProps> & { children?: React.ReactNode };
+/** <ray-popover> as a React component. */
+export declare const RayPopover: React.ForwardRefExoticComponent<RayPopoverProps & React.RefAttributes<Ray.RayPopover>>;
+
+export interface RayTooltipOwnProps {
+  /** Tooltip text. */
+  label?: string;
+  /** Preferred side. */
+  placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+  /** ms before showing. */
+  openDelay?: number;
+  /** ms before hiding. */
+  closeDelay?: number;
+  /** A palette color or any CSS color. Default: inverted foreground/background. */
+  color?: string;
+  /** Never shows. */
+  disabled?: boolean;
+  /** Shown. */
+  open?: boolean;
+  /** Gap to the anchor in px. */
+  offset?: number;
+}
+export type RayTooltipProps = RayTooltipOwnProps & Omit<React.HTMLAttributes<Ray.RayTooltip>, keyof RayTooltipOwnProps> & { children?: React.ReactNode };
+/** <ray-tooltip> as a React component. */
+export declare const RayTooltip: React.ForwardRefExoticComponent<RayTooltipProps & React.RefAttributes<Ray.RayTooltip>>;
+
+export interface RayAccordionOwnProps {
+  /** Open item's value; with multiple, an array (attribute: comma-separated). */
+  value?: string | string[] | undefined;
+  /** Several items may be open. */
+  multiple?: boolean;
+  /** Visual style. */
+  variant?: "default" | "contained" | "separated" | "filled";
+  /** Side of the chevron. */
+  chevronPosition?: "right" | "left";
+  /** The user opened or closed an item. */
+  onChange?: (event: Event) => void;
+}
+export type RayAccordionProps = RayAccordionOwnProps & Omit<React.HTMLAttributes<Ray.RayAccordion>, keyof RayAccordionOwnProps> & { children?: React.ReactNode };
+/** <ray-accordion> as a React component. */
+export declare const RayAccordion: React.ForwardRefExoticComponent<RayAccordionProps & React.RefAttributes<Ray.RayAccordion>>;
+
+export interface RayAccordionItemOwnProps {
+  /** Identifies the item in the accordion's value. */
+  value?: string;
+  /** Header text (or slot=label). */
+  label?: string;
+  /** A secondary line under the label, in the header. */
+  description?: string;
+  /** Cannot be toggled. */
+  disabled?: boolean;
+  /** aria-level of the header. */
+  headingLevel?: number;
+}
+export type RayAccordionItemProps = RayAccordionItemOwnProps & Omit<React.HTMLAttributes<Ray.RayAccordionItem>, keyof RayAccordionItemOwnProps> & { children?: React.ReactNode };
+/** <ray-accordion-item> as a React component. */
+export declare const RayAccordionItem: React.ForwardRefExoticComponent<RayAccordionItemProps & React.RefAttributes<Ray.RayAccordionItem>>;
+
+export interface RayAttachmentOwnProps {
+  /** File name (ellipsized; full name in the tooltip). */
+  name?: string;
+  /** Size in bytes, shown as "12 KB", "3.4 MB". */
+  size?: number;
+  /** MIME type: picks the icon (image or file) and, with the name, the extension badge. */
+  type?: string;
+  /** Thumbnail URL for images (falls back to the icon if it fails to load). */
+  src?: string;
+  /** Makes the name a download link. */
+  href?: string;
+  /** Upload progress 0–100: a thin bar and "Uploading… 45%". Unset: done. */
+  progress?: number;
+  /** Explicit state. Default: "uploading" while progress is set, else "done". */
+  status?: "uploading" | "done" | "error";
+  /** Error text shown with status="error" (default "Upload failed"). */
+  error?: string;
+  /** Shows a remove (×) button. */
+  removable?: boolean;
+  /** Accessible label of the remove button; {name} is replaced by the file name. */
+  removeLabel?: string;
+  /** row: a compact chip; card: the thumbnail on top. */
+  variant?: "row" | "card";
+  /** Dimmed, not removable, the name is not a link. */
+  disabled?: boolean;
+  /** The remove button was pressed; cancelable (preventDefault keeps the element). */
+  onRayRemove?: (event: CustomEvent<{ name: string; file: File | null }>) => void;
+}
+export type RayAttachmentProps = RayAttachmentOwnProps & Omit<React.HTMLAttributes<Ray.RayAttachment>, keyof RayAttachmentOwnProps> & { children?: React.ReactNode };
+/** <ray-attachment> as a React component. */
+export declare const RayAttachment: React.ForwardRefExoticComponent<RayAttachmentProps & React.RefAttributes<Ray.RayAttachment>>;
+
+export interface RayAttachmentsOwnProps {
+}
+export type RayAttachmentsProps = RayAttachmentsOwnProps & Omit<React.HTMLAttributes<Ray.RayAttachments>, keyof RayAttachmentsOwnProps> & { children?: React.ReactNode };
+/** <ray-attachments> as a React component. */
+export declare const RayAttachments: React.ForwardRefExoticComponent<RayAttachmentsProps & React.RefAttributes<Ray.RayAttachments>>;
+
+export interface RayAvatarOwnProps {
+  /** Image URL; falls back to initials if it fails to load. */
+  src?: string;
+  /** Accessible name (default: name). */
+  alt?: string;
+  /** Person or entity name; its initials are shown without an image. */
+  name?: string;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Style of the initials/placeholder. */
+  variant?: "light" | "filled" | "outline" | "default";
+  /** Diameter. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+}
+export type RayAvatarProps = RayAvatarOwnProps & Omit<React.HTMLAttributes<Ray.RayAvatar>, keyof RayAvatarOwnProps> & { children?: React.ReactNode };
+/** <ray-avatar> as a React component. */
+export declare const RayAvatar: React.ForwardRefExoticComponent<RayAvatarProps & React.RefAttributes<Ray.RayAvatar>>;
+
+export interface RayBadgeOwnProps {
+  /** Visual style. */
+  variant?: "light" | "filled" | "outline" | "dot" | "default" | "gradient";
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient?: string;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Keeps the text as written instead of uppercase. */
+  normalCase?: boolean;
+}
+export type RayBadgeProps = RayBadgeOwnProps & Omit<React.HTMLAttributes<Ray.RayBadge>, keyof RayBadgeOwnProps> & { children?: React.ReactNode };
+/** <ray-badge> as a React component. */
+export declare const RayBadge: React.ForwardRefExoticComponent<RayBadgeProps & React.RefAttributes<Ray.RayBadge>>;
+
+export interface RayBlockquoteOwnProps {
+  /** Who said it, shown below the quote ("— Grace Hopper"). */
+  cite?: string;
+  /** URL of the source: the inner blockquote's cite attribute. */
+  href?: string;
+  /** A palette color or any CSS color, for the edge, the mark and the tint. Default: the primary. */
+  color?: string;
+  /** light: tinted background; outline: border and edge only; filled: solid color (a pull quote). */
+  variant?: "light" | "outline" | "filled";
+  /** Registry icon of the mark, or none. The icon slot replaces it. */
+  icon?: string;
+  /** Text size (lg for a pull quote). */
+  size?: "sm" | "md" | "lg";
+  /** Inner spacing: xs…xl (the spacing scale), px as a number, or a CSS length. Default: md. */
+  padding?: string;
+  /** No colored edge on the start side (the tint, border and mark stay). */
+  hideEdge?: boolean;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: md. */
+  radius?: string;
+}
+export type RayBlockquoteProps = RayBlockquoteOwnProps & Omit<React.HTMLAttributes<Ray.RayBlockquote>, keyof RayBlockquoteOwnProps> & { children?: React.ReactNode };
+/** <ray-blockquote> as a React component. */
+export declare const RayBlockquote: React.ForwardRefExoticComponent<RayBlockquoteProps & React.RefAttributes<Ray.RayBlockquote>>;
+
+export interface RayCarouselOwnProps {
+  /** Current position (0-based). Setting it scrolls there. */
+  index?: number;
+  /** Accessible name of the carousel region. */
+  label?: string;
+  /** Size of each slide along the scroll axis ("100%" by default; "50%", "18rem"…). */
+  slideSize?: string;
+  /** Space between slides (default var(--ray-space-4)). */
+  slideGap?: string;
+  /** Where a slide snaps in the viewport. */
+  align?: "start" | "center";
+  /** Scroll axis (vertical needs a height; 20rem by default). */
+  orientation?: "horizontal" | "vertical";
+  /** next() on the last position goes to the first, prev() on the first to the last. */
+  loop?: boolean;
+  /** Milliseconds between automatic moves (0: off). Pauses on hover, focus and when the page is hidden; starts paused with reduced motion. Shows a pause/play button. */
+  autoplay?: number;
+  /** No previous/next buttons. */
+  hideControls?: boolean;
+  /** No indicator dots. */
+  hideIndicators?: boolean;
+  /** The current position changed (read `index`) by the user or a method (controls, indicators, keyboard, swipe, scroll, next/prev/goTo, autoplay) — not when `index` is set by code. */
+  onChange?: (event: Event) => void;
+}
+export type RayCarouselProps = RayCarouselOwnProps & Omit<React.HTMLAttributes<Ray.RayCarousel>, keyof RayCarouselOwnProps> & { children?: React.ReactNode };
+/** <ray-carousel> as a React component. */
+export declare const RayCarousel: React.ForwardRefExoticComponent<RayCarouselProps & React.RefAttributes<Ray.RayCarousel>>;
+
+export interface RayCodeOwnProps {
+  /** The code, from script (the most convenient in React and Vue). Wins over the content. */
+  code?: string;
+  /** The language: js, ts, jsx, tsx, json, html, xml, svg, vue, css, sh, ray, diff… (also shown in the header). Not lang: that is the human language of the text. */
+  language?: string;
+  /** A file name or title in the header; also the scroll region's accessible name. */
+  filename?: string;
+  /** Numbers each line (not copied, not selectable). */
+  lineNumbers?: boolean;
+  /** Lines to highlight: "3, 5-7". */
+  highlight?: string;
+  /** Wraps long lines instead of scrolling sideways. */
+  wrap?: boolean;
+  /** Height before it scrolls: px as a number, or a CSS length. A taller block gets a "Show all N lines" button. */
+  maxHeight?: string;
+  /** Shown whole, past max-height. */
+  expanded?: boolean;
+  /** No copy button. */
+  hideCopy?: boolean;
+  /** No header bar (the copy button floats in the corner). */
+  hideHeader?: boolean;
+  /** Font size. */
+  size?: "xs" | "sm" | "md";
+  /** Corner radius: xs…xl, none, or a CSS length. Default: md. */
+  radius?: string;
+  /** Accessible name of the copy button. */
+  copyLabel?: string;
+  /** Shown and announced after copying. */
+  copiedLabel?: string;
+  /** The code was copied. */
+  onRayCopy?: (event: CustomEvent<{ code: string }>) => void;
+}
+export type RayCodeProps = RayCodeOwnProps & Omit<React.HTMLAttributes<Ray.RayCode>, keyof RayCodeOwnProps> & { children?: React.ReactNode };
+/** <ray-code> as a React component. */
+export declare const RayCode: React.ForwardRefExoticComponent<RayCodeProps & React.RefAttributes<Ray.RayCode>>;
+
+export interface RayIconOwnProps {
+  /** Registered icon name (iconNames()). */
+  name?: string;
+  /** xs…xl or any CSS length. Default: 1em. */
+  size?: string;
+  /** Accessible name; without it the icon is decorative (hidden from screen readers). */
+  label?: string;
+  /** A palette color or any CSS color. Default: the text color. */
+  color?: string;
+  /** Stroke width for stroke icons (default: --ray-icon-stroke, 2). */
+  stroke?: number;
+}
+export type RayIconProps = RayIconOwnProps & Omit<React.HTMLAttributes<Ray.RayIcon>, keyof RayIconOwnProps> & { children?: React.ReactNode };
+/** <ray-icon> as a React component. */
+export declare const RayIcon: React.ForwardRefExoticComponent<RayIconProps & React.RefAttributes<Ray.RayIcon>>;
+
+export interface RayIndicatorOwnProps {
+  /** Text in the indicator (a word or a count). Empty: a dot. */
+  label?: string;
+  /** Which point of the content's box it sits on. */
+  position?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
+  /** Moves it inward from that point: px as a number, or a CSS length. Use it on round content (an avatar), so it sits on the curve. */
+  offset?: string | number;
+  /** A palette color or any CSS color. Default: the primary. */
+  color?: string;
+  /** Diameter of the dot (and minimum height of a label): px as a number, or a CSS length. Default: 10px. */
+  size?: string | number;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: round. */
+  radius?: string;
+  /** A numeric label above it shows as max+ (99+). */
+  max?: number;
+  /** inline-block, to sit within a line of text. */
+  inline?: boolean;
+  /** A ring in the background color, to separate it from the content. */
+  withBorder?: boolean;
+  /** A pulse around it (live, recording, syncing). */
+  processing?: boolean;
+  /** Hides the indicator (the content stays). */
+  disabled?: boolean;
+}
+export type RayIndicatorProps = RayIndicatorOwnProps & Omit<React.HTMLAttributes<Ray.RayIndicator>, keyof RayIndicatorOwnProps> & { children?: React.ReactNode };
+/** <ray-indicator> as a React component. */
+export declare const RayIndicator: React.ForwardRefExoticComponent<RayIndicatorProps & React.RefAttributes<Ray.RayIndicator>>;
+
+export interface RayKbdOwnProps {
+  /** Font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** default: raised keycap; filled: flat muted chip; outline: flat with a border. */
+  variant?: "default" | "filled" | "outline";
+}
+export type RayKbdProps = RayKbdOwnProps & Omit<React.HTMLAttributes<Ray.RayKbd>, keyof RayKbdOwnProps> & { children?: React.ReactNode };
+/** <ray-kbd> as a React component. */
+export declare const RayKbd: React.ForwardRefExoticComponent<RayKbdProps & React.RefAttributes<Ray.RayKbd>>;
+
+export interface RayStatOwnProps {
+  /** What is measured. */
+  label?: string;
+  /** The figure, already formatted. */
+  value?: string;
+  /** Change (positive is shown as good, in green; see inverse). */
+  diff?: number;
+  /** Unit of diff. */
+  diffUnit?: string;
+  /** A line under the value (compared to…). */
+  note?: string;
+  /** Lower is better (errors, latency): negative diffs are green. */
+  inverse?: boolean;
+  /** Without the card around. */
+  plain?: boolean;
+}
+export type RayStatProps = RayStatOwnProps & Omit<React.HTMLAttributes<Ray.RayStat>, keyof RayStatOwnProps> & { children?: React.ReactNode };
+/** <ray-stat> as a React component. */
+export declare const RayStat: React.ForwardRefExoticComponent<RayStatProps & React.RefAttributes<Ray.RayStat>>;
+
+export interface RayTableOwnProps {
+  /** Columns: key, label, width, align, sortable, render(row, index), sort(a, b). */
+  columns?: Ray.TableColumn[];
+  /** Rows (objects). */
+  data?: any[];
+  /** Field that identifies a row (selection). */
+  rowKey?: string;
+  /** A checkbox per row and a select-all checkbox. */
+  selectable?: boolean;
+  /** Keys of the selected rows. */
+  selection?: unknown[];
+  /** Current sort; set it, or let header clicks change it. */
+  sort?: Ray.TableSort | null;
+  /** Do not sort here: listen to ray-sort and pass sorted data. */
+  manualSort?: boolean;
+  /** Rows are focusable and fire ray-row-click (Enter too; arrows move between rows). */
+  clickableRows?: boolean;
+  /** Alternate row background. */
+  striped?: boolean;
+  /** Border around the table. */
+  withBorder?: boolean;
+  /** Borders between columns. */
+  withColumnBorders?: boolean;
+  /** The header stays visible while scrolling (with --ray-table-max-height). */
+  stickyHeader?: boolean;
+  /** No row highlight on hover. */
+  noHover?: boolean;
+  /** Cell padding. */
+  density?: "xs" | "sm" | "md" | "lg";
+  /** Caption (also the table's accessible name). */
+  label?: string;
+  /** Text without rows (or put a ray-empty-state in slot=empty). */
+  emptyLabel?: string;
+  /** A header changed the sort. */
+  onRaySort?: (event: CustomEvent<{ key: string; direction: "asc" | "desc" | null }>) => void;
+  /** The selection changed. */
+  onRaySelectionChange?: (event: CustomEvent<{ selection: unknown[] }>) => void;
+  /** A row was clicked or activated with Enter (clickable-rows). */
+  onRayRowClick?: (event: CustomEvent<{ row: any; index: number }>) => void;
+}
+export type RayTableProps = RayTableOwnProps & Omit<React.HTMLAttributes<Ray.RayTable>, keyof RayTableOwnProps> & { children?: React.ReactNode };
+/** <ray-table> as a React component. */
+export declare const RayTable: React.ForwardRefExoticComponent<RayTableProps & React.RefAttributes<Ray.RayTable>>;
+
+export interface RayTimelineOwnProps {
+  /** Index of the last reached item (-1: none). */
+  active?: number;
+  /** Side of the line. */
+  align?: "left" | "right";
+  /** Bullet size: px as a number or a CSS length (default 20px). */
+  bulletSize?: string;
+  /** Line width in px (default 2). */
+  lineWidth?: number;
+  /** A palette color or any CSS color for what is reached (default: primary). */
+  color?: string;
+  /** Counts active from the end (the latest event at the top). */
+  reverseActive?: boolean;
+}
+export type RayTimelineProps = RayTimelineOwnProps & Omit<React.HTMLAttributes<Ray.RayTimeline>, keyof RayTimelineOwnProps> & { children?: React.ReactNode };
+/** <ray-timeline> as a React component. */
+export declare const RayTimeline: React.ForwardRefExoticComponent<RayTimelineProps & React.RefAttributes<Ray.RayTimeline>>;
+
+export interface RayTimelineItemOwnProps {
+  /** The title of the event. */
+  label?: string;
+  /** When ("2 h ago", a date). */
+  time?: string;
+  /** An icon of the registry in the bullet. */
+  icon?: string;
+  /** Its own color (a failed step in red). */
+  color?: string;
+  /** The line to the next item (dashed: not happened yet). */
+  lineVariant?: "solid" | "dashed" | "dotted";
+}
+export type RayTimelineItemProps = RayTimelineItemOwnProps & Omit<React.HTMLAttributes<Ray.RayTimelineItem>, keyof RayTimelineItemOwnProps> & { children?: React.ReactNode };
+/** <ray-timeline-item> as a React component. */
+export declare const RayTimelineItem: React.ForwardRefExoticComponent<RayTimelineItemProps & React.RefAttributes<Ray.RayTimelineItem>>;
+
+export interface RayAlertOwnProps {
+  /** Title. */
+  label?: string;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Visual style. */
+  variant?: "light" | "filled" | "outline" | "default" | "transparent";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** A registered icon name, or none. */
+  icon?: string;
+  /** A close button; closing hides the alert (cancel ray-close to keep it). */
+  closable?: boolean;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+  /** The close button was pressed; cancelable. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+export type RayAlertProps = RayAlertOwnProps & Omit<React.HTMLAttributes<Ray.RayAlert>, keyof RayAlertOwnProps> & { children?: React.ReactNode };
+/** <ray-alert> as a React component. */
+export declare const RayAlert: React.ForwardRefExoticComponent<RayAlertProps & React.RefAttributes<Ray.RayAlert>>;
+
+export interface RayEmptyStateOwnProps {
+  /** Title. */
+  label?: string;
+  /** Less padding. */
+  compact?: boolean;
+  /** Dashed border. */
+  withBorder?: boolean;
+}
+export type RayEmptyStateProps = RayEmptyStateOwnProps & Omit<React.HTMLAttributes<Ray.RayEmptyState>, keyof RayEmptyStateOwnProps> & { children?: React.ReactNode };
+/** <ray-empty-state> as a React component. */
+export declare const RayEmptyState: React.ForwardRefExoticComponent<RayEmptyStateProps & React.RefAttributes<Ray.RayEmptyState>>;
+
+export interface RayNotificationOwnProps {
+  /** Title. */
+  label?: string;
+  /** Status color: tints the status icon (and a slotted icon's circle). */
+  color?: string;
+  /** Status icon from the registry (default: from the color); "none" for no icon. */
+  icon?: string;
+  /** Shows a spinner (notify() does not auto-close it). */
+  loading?: boolean;
+  /** No close button. */
+  hideClose?: boolean;
+  /** Draws a border. */
+  withBorder?: boolean;
+  /** Text of an action button (e.g. "Undo"); pressing it fires ray-action. */
+  actionLabel?: string;
+  /** The close button was pressed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+  /** The action button was pressed (notify() runs action.onClick and closes it). */
+  onRayAction?: (event: CustomEvent<unknown>) => void;
+}
+export type RayNotificationProps = RayNotificationOwnProps & Omit<React.HTMLAttributes<Ray.RayNotification>, keyof RayNotificationOwnProps> & { children?: React.ReactNode };
+/** <ray-notification> as a React component. */
+export declare const RayNotification: React.ForwardRefExoticComponent<RayNotificationProps & React.RefAttributes<Ray.RayNotification>>;
+
+export interface RayToasterOwnProps {
+  /** Corner of the stack. */
+  position?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center";
+  /** Maximum kept; the oldest go first. */
+  limit?: number;
+  /** Toasts shown in the collapsed stack (the rest wait, hidden). */
+  visible?: number;
+  /** Always expanded: a list instead of a stack. */
+  expand?: boolean;
+  /** Pixels between toasts when expanded. */
+  gap?: number;
+}
+export type RayToasterProps = RayToasterOwnProps & Omit<React.HTMLAttributes<Ray.RayToaster>, keyof RayToasterOwnProps> & { children?: React.ReactNode };
+/** <ray-toaster> as a React component. */
+export declare const RayToaster: React.ForwardRefExoticComponent<RayToasterProps & React.RefAttributes<Ray.RayToaster>>;
+
+export interface RayProgressOwnProps {
+  /** Progress, from 0 to max. Unset: indeterminate. */
+  value?: number;
+  /** The value of a full bar. */
+  max?: number;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Bar height. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Diagonal stripes. */
+  striped?: boolean;
+  /** Moving stripes (with striped). */
+  animated?: boolean;
+  /** Shows the percentage: inside the bar on lg and xl, beside it on smaller sizes. */
+  showValue?: boolean;
+  /** Accessible name (default: Progress). */
+  label?: string;
+}
+export type RayProgressProps = RayProgressOwnProps & Omit<React.HTMLAttributes<Ray.RayProgress>, keyof RayProgressOwnProps> & { children?: React.ReactNode };
+/** <ray-progress> as a React component. */
+export declare const RayProgress: React.ForwardRefExoticComponent<RayProgressProps & React.RefAttributes<Ray.RayProgress>>;
+
+export interface RaySkeletonOwnProps {
+  /** Width (CSS length, a number is px). Default: 100% (a circle: 2.5rem). */
+  width?: string;
+  /** Height of a block or of each line (CSS length, a number is px). Default: 1rem. */
+  height?: string;
+  /** A circle (avatar placeholder): its diameter is width, else height. */
+  circle?: boolean;
+  /** Number of text lines (the last one is shorter). */
+  lines?: number;
+  /** Corner radius: xs…xl, full or a CSS length. Default: sm. */
+  radius?: string;
+  /** The loading effect (always none with reduced motion). */
+  animation?: "shimmer" | "pulse" | "none";
+  /** Shows the slotted content instead of the placeholder. */
+  loaded?: boolean;
+}
+export type RaySkeletonProps = RaySkeletonOwnProps & Omit<React.HTMLAttributes<Ray.RaySkeleton>, keyof RaySkeletonOwnProps> & { children?: React.ReactNode };
+/** <ray-skeleton> as a React component. */
+export declare const RaySkeleton: React.ForwardRefExoticComponent<RaySkeletonProps & React.RefAttributes<Ray.RaySkeleton>>;
+
+export interface RaySpinnerOwnProps {
+  /** A palette color or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Diameter. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Text read by screen readers. */
+  label?: string;
+}
+export type RaySpinnerProps = RaySpinnerOwnProps & Omit<React.HTMLAttributes<Ray.RaySpinner>, keyof RaySpinnerOwnProps> & { children?: React.ReactNode };
+/** <ray-spinner> as a React component. */
+export declare const RaySpinner: React.ForwardRefExoticComponent<RaySpinnerProps & React.RefAttributes<Ray.RaySpinner>>;
+
+export interface RayAppBarOwnProps {
+  /** The title. */
+  label?: string;
+  /** A line under the title. */
+  description?: string;
+  /** The title centered (iOS). */
+  center?: boolean;
+  /** default: the page background; filled: the primary color; transparent: until it elevates. */
+  variant?: "default" | "filled" | "transparent";
+  /** Height: 48, 56 or 64 px. */
+  size?: "sm" | "md" | "lg";
+  /** While the content scrolls: elevate (border and shadow), hide (also slides away going down, back going up), none. */
+  scrollBehavior?: "elevate" | "hide" | "none";
+  /** Sticks to the top of the window (outside a shell). */
+  sticky?: boolean;
+  /** A selector of the element whose scrolling it follows (default: its shell's, else the window). */
+  scrollTarget?: string;
+}
+export type RayAppBarProps = RayAppBarOwnProps & Omit<React.HTMLAttributes<Ray.RayAppBar>, keyof RayAppBarOwnProps> & { children?: React.ReactNode };
+/** <ray-app-bar> as a React component. */
+export declare const RayAppBar: React.ForwardRefExoticComponent<RayAppBarProps & React.RefAttributes<Ray.RayAppBar>>;
+
+export interface RayAppShellOwnProps {
+  /** default: the header across the top; alt: the navbar full height, the header beside it. */
+  layout?: "default" | "alt";
+  /** Width (px, em or rem) below which it takes the phone layout. */
+  breakpoint?: string;
+  /** Padding of the main area: xs…xl, a number (px) or a CSS length. */
+  padding?: string;
+  /** It switched between the wide and the phone layout. */
+  onRayBreakpoint?: (event: CustomEvent<{ mobile: boolean }>) => void;
+}
+export type RayAppShellProps = RayAppShellOwnProps & Omit<React.HTMLAttributes<Ray.RayAppShell>, keyof RayAppShellOwnProps> & { children?: React.ReactNode };
+/** <ray-app-shell> as a React component. */
+export declare const RayAppShell: React.ForwardRefExoticComponent<RayAppShellProps & React.RefAttributes<Ray.RayAppShell>>;
+
+export interface RayAspectRatioOwnProps {
+  /** Width/height: "16/9", "4:3", "1" or a number. */
+  ratio?: string;
+  /** How the media fills the box (object-fit). */
+  fit?: "cover" | "contain";
+  /** Corner radius: xs…xl, full or a CSS length. */
+  radius?: string;
+}
+export type RayAspectRatioProps = RayAspectRatioOwnProps & Omit<React.HTMLAttributes<Ray.RayAspectRatio>, keyof RayAspectRatioOwnProps> & { children?: React.ReactNode };
+/** <ray-aspect-ratio> as a React component. */
+export declare const RayAspectRatio: React.ForwardRefExoticComponent<RayAspectRatioProps & React.RefAttributes<Ray.RayAspectRatio>>;
+
+export interface RayCardOwnProps {
+  /** Inner spacing (named space scale). */
+  padding?: "0" | "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Elevation. */
+  shadow?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Draws a border. */
+  withBorder?: boolean;
+  /** default: card surface; filled: muted surface; outline: border without fill. */
+  variant?: "default" | "filled" | "outline";
+}
+export type RayCardProps = RayCardOwnProps & Omit<React.HTMLAttributes<Ray.RayCard>, keyof RayCardOwnProps> & { children?: React.ReactNode };
+/** <ray-card> as a React component. */
+export declare const RayCard: React.ForwardRefExoticComponent<RayCardProps & React.RefAttributes<Ray.RayCard>>;
+
+export interface RayCenterOwnProps {
+  /** As wide as its content (inline-flex): an icon beside text. */
+  inline?: boolean;
+}
+export type RayCenterProps = RayCenterOwnProps & Omit<React.HTMLAttributes<Ray.RayCenter>, keyof RayCenterOwnProps> & { children?: React.ReactNode };
+/** <ray-center> as a React component. */
+export declare const RayCenter: React.ForwardRefExoticComponent<RayCenterProps & React.RefAttributes<Ray.RayCenter>>;
+
+export interface RayContainerOwnProps {
+  /** Maximum width: xs 540px, sm 720px, md 960px, lg 1140px, xl 1320px, or any CSS length. */
+  size?: string;
+  /** Side padding: xs…xl, a number (px) or a CSS length. */
+  padding?: string;
+  /** No maximum width: the whole width, still padded. */
+  fluid?: boolean;
+}
+export type RayContainerProps = RayContainerOwnProps & Omit<React.HTMLAttributes<Ray.RayContainer>, keyof RayContainerOwnProps> & { children?: React.ReactNode };
+/** <ray-container> as a React component. */
+export declare const RayContainer: React.ForwardRefExoticComponent<RayContainerProps & React.RefAttributes<Ray.RayContainer>>;
+
+export interface RayGridOwnProps {
+  /** Columns: a count, then counts from a width up ("1 sm:2 lg:4"). */
+  cols?: string;
+  /** Instead of cols: as many columns of at least this width as fit ("14rem", 220). */
+  minColWidth?: string;
+  /** Space between cells: xs…xl, a number (px) or a CSS length. */
+  gap?: string;
+  /** Space between rows when it differs from gap. */
+  rowGap?: string;
+  /** Vertical alignment of the cells in a row. */
+  align?: "stretch" | "start" | "center" | "end";
+}
+export type RayGridProps = RayGridOwnProps & Omit<React.HTMLAttributes<Ray.RayGrid>, keyof RayGridOwnProps> & { children?: React.ReactNode };
+/** <ray-grid> as a React component. */
+export declare const RayGrid: React.ForwardRefExoticComponent<RayGridProps & React.RefAttributes<Ray.RayGrid>>;
+
+export interface RayGroupOwnProps {
+  /** Space between children: xs…xl (the space scale), a number (px) or any CSS length. */
+  gap?: string;
+  /** Cross-axis alignment. */
+  align?: "center" | "start" | "end" | "stretch" | "baseline";
+  /** Main-axis distribution: space-between for a title on one side and actions on the other. */
+  justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+  /** Keeps the children on one line. */
+  nowrap?: boolean;
+  /** The children share the width equally. */
+  grow?: boolean;
+}
+export type RayGroupProps = RayGroupOwnProps & Omit<React.HTMLAttributes<Ray.RayGroup>, keyof RayGroupOwnProps> & { children?: React.ReactNode };
+/** <ray-group> as a React component. */
+export declare const RayGroup: React.ForwardRefExoticComponent<RayGroupProps & React.RefAttributes<Ray.RayGroup>>;
+
+export interface RayScrollAreaOwnProps {
+  /** Height (CSS length). */
+  height?: string;
+  /** Maximum height: it grows with its content up to this, then scrolls. */
+  maxHeight?: string;
+  /** Which ways it scrolls. */
+  orientation?: "vertical" | "horizontal" | "both";
+  /** The scrollbar: auto (when it scrolls), hover (while hovered or scrolling), never (still scrolls). */
+  type?: "auto" | "hover" | "never";
+  /** No edge shadows. */
+  noShadows?: boolean;
+  /** Distance from the end (px) at which ray-reach-end fires. */
+  threshold?: number;
+  /** Accessible name: makes the scrolling box a named region. */
+  label?: string;
+  /** The end came within threshold (once per arrival). */
+  onRayReachEnd?: (event: CustomEvent<{ edge: "bottom" | "right" }>) => void;
+}
+export type RayScrollAreaProps = RayScrollAreaOwnProps & Omit<React.HTMLAttributes<Ray.RayScrollArea>, keyof RayScrollAreaOwnProps> & { children?: React.ReactNode };
+/** <ray-scroll-area> as a React component. */
+export declare const RayScrollArea: React.ForwardRefExoticComponent<RayScrollAreaProps & React.RefAttributes<Ray.RayScrollArea>>;
+
+export interface RaySeparatorOwnProps {
+  /** Direction of the rule. */
+  orientation?: "horizontal" | "vertical";
+  /** Text in the middle of a horizontal rule. */
+  label?: string;
+  /** Where the label sits. */
+  labelPosition?: "left" | "center" | "right";
+  /** Thickness (1–5px). */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Line style. */
+  variant?: "solid" | "dashed" | "dotted";
+}
+export type RaySeparatorProps = RaySeparatorOwnProps & Omit<React.HTMLAttributes<Ray.RaySeparator>, keyof RaySeparatorOwnProps> & { children?: React.ReactNode };
+/** <ray-separator> as a React component. */
+export declare const RaySeparator: React.ForwardRefExoticComponent<RaySeparatorProps & React.RefAttributes<Ray.RaySeparator>>;
+
+export interface RaySplitOwnProps {
+  /** horizontal: side by side; vertical: stacked. */
+  orientation?: "horizontal" | "vertical";
+  /** Initial size of the start pane: px (280) or any CSS length (30%, 20rem). */
+  position?: string;
+  /** Minimum size of the start pane in px. */
+  min?: number;
+  /** Maximum size of the start pane in px. */
+  max?: number;
+  /** The start pane is hidden. */
+  collapsed?: boolean;
+  /** The divider cannot be moved. */
+  disabled?: boolean;
+  /** A key: the size is saved in localStorage and restored. */
+  autosave?: string;
+  /** After a drag, a key or a collapse. */
+  onRayResize?: (event: CustomEvent<{ size: number; collapsed: boolean }>) => void;
+}
+export type RaySplitProps = RaySplitOwnProps & Omit<React.HTMLAttributes<Ray.RaySplit>, keyof RaySplitOwnProps> & { children?: React.ReactNode };
+/** <ray-split> as a React component. */
+export declare const RaySplit: React.ForwardRefExoticComponent<RaySplitProps & React.RefAttributes<Ray.RaySplit>>;
+
+export interface RayStackOwnProps {
+  /** Space between children: xs…xl (the space scale), a number (px) or any CSS length. */
+  gap?: string;
+  /** Cross-axis alignment: stretch fills the width. */
+  align?: "stretch" | "start" | "center" | "end" | "baseline";
+  /** Main-axis distribution (with a height to distribute). */
+  justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+}
+export type RayStackProps = RayStackOwnProps & Omit<React.HTMLAttributes<Ray.RayStack>, keyof RayStackOwnProps> & { children?: React.ReactNode };
+/** <ray-stack> as a React component. */
+export declare const RayStack: React.ForwardRefExoticComponent<RayStackProps & React.RefAttributes<Ray.RayStack>>;
+
+export interface RayStatusbarOwnProps {
+  /** accent: the primary color (e.g. while debugging). */
+  variant?: "default" | "accent";
+}
+export type RayStatusbarProps = RayStatusbarOwnProps & Omit<React.HTMLAttributes<Ray.RayStatusbar>, keyof RayStatusbarOwnProps> & { children?: React.ReactNode };
+/** <ray-statusbar> as a React component. */
+export declare const RayStatusbar: React.ForwardRefExoticComponent<RayStatusbarProps & React.RefAttributes<Ray.RayStatusbar>>;
+
+export interface RayStatusbarItemOwnProps {
+  /** A button (listen to click). */
+  action?: boolean;
+  /** Text color (red for errors…). */
+  color?: string;
+  /** Accessible name and tooltip (for icon-only or terse items). */
+  label?: string;
+}
+export type RayStatusbarItemProps = RayStatusbarItemOwnProps & Omit<React.HTMLAttributes<Ray.RayStatusbarItem>, keyof RayStatusbarItemOwnProps> & { children?: React.ReactNode };
+/** <ray-statusbar-item> as a React component. */
+export declare const RayStatusbarItem: React.ForwardRefExoticComponent<RayStatusbarItemProps & React.RefAttributes<Ray.RayStatusbarItem>>;
+
+export interface RayThemeToggleOwnProps {
+  /** Control height. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Fired on the document root by setTheme(); detail: { theme, resolved, primary }. */
+  onRayThemeChange?: (event: CustomEvent<{ theme: "light" | "dark" | "system"; resolved: "light" | "dark"; primary: string | null }>) => void;
+}
+export type RayThemeToggleProps = RayThemeToggleOwnProps & Omit<React.HTMLAttributes<Ray.RayThemeToggle>, keyof RayThemeToggleOwnProps> & { children?: React.ReactNode };
+/** <ray-theme-toggle> as a React component. */
+export declare const RayThemeToggle: React.ForwardRefExoticComponent<RayThemeToggleProps & React.RefAttributes<Ray.RayThemeToggle>>;