@raylang/react 0.10.0 → 0.12.0

package/components/input.js

@@ -6,5 +6,5 @@ import { createComponent } from "../create.js";
 export const RayInput = /*#__PURE__*/ createComponent("ray-input", {
   displayName: "RayInput",
   properties: ["value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
-  events: { onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
+  events: { onRayComplete: "ray-complete", onRayHighlightHover: "ray-highlight-hover", onInput: "input", onChange: "change" },
 });

package/components/menu.js

@@ -5,7 +5,7 @@ import { createComponent } from "../create.js";
 
 export const RayMenu = /*#__PURE__*/ createComponent("ray-menu", {
   displayName: "RayMenu",
-  properties: ["open", "placement", "context", "keepOpen", "native", "offset"],
+  properties: ["open", "placement", "context", "keepOpen", "native", "anchor", "offset"],
   events: { onRaySelect: "ray-select", onRayRequestOpen: "ray-request-open", onRayOpen: "ray-open", onRayClose: "ray-close" },
 });
 export const RayMenuItem = /*#__PURE__*/ createComponent("ray-menu-item", {

package/components/mode-input.js

@@ -6,5 +6,5 @@ import { createComponent } from "../create.js";
 export const RayModeInput = /*#__PURE__*/ createComponent("ray-mode-input", {
   displayName: "RayModeInput",
   properties: ["mode", "options", "display", "position", "menuLabel", "nativeMenu", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
-  events: { onRayModeChange: "ray-mode-change", onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
+  events: { onRayModeChange: "ray-mode-change", onRayComplete: "ray-complete", onRayHighlightHover: "ray-highlight-hover", onInput: "input", onChange: "change" },
 });

package/components/password-input.js

@@ -6,5 +6,5 @@ import { createComponent } from "../create.js";
 export const RayPasswordInput = /*#__PURE__*/ createComponent("ray-password-input", {
   displayName: "RayPasswordInput",
   properties: ["visible", "showLabel", "hideLabel", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
-  events: { onRayVisibilityChange: "ray-visibility-change", onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
+  events: { onRayVisibilityChange: "ray-visibility-change", onRayComplete: "ray-complete", onRayHighlightHover: "ray-highlight-hover", onInput: "input", onChange: "change" },
 });

package/components/path-input.js

@@ -6,5 +6,5 @@ import { createComponent } from "../create.js";
 export const RayPathInput = /*#__PURE__*/ createComponent("ray-path-input", {
   displayName: "RayPathInput",
   properties: ["mode", "accept", "browseLabel", "dialogTitle", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
-  events: { onChange: "change", onRayError: "ray-error", onRayComplete: "ray-complete", onInput: "input" },
+  events: { onChange: "change", onRayError: "ray-error", onRayComplete: "ray-complete", onRayHighlightHover: "ray-highlight-hover", onInput: "input" },
 });

package/components/popover.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayPopover = /*#__PURE__*/ createComponent("ray-popover", {
   displayName: "RayPopover",
-  properties: ["open", "placement", "offset", "width", "matchWidth", "padding", "trapFocus"],
+  properties: ["open", "placement", "offset", "anchor", "width", "matchWidth", "padding", "trapFocus"],
   events: { onRayOpen: "ray-open", onRayClose: "ray-close" },
 });

package/components/pulse.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/pulse";
+import { createComponent } from "../create.js";
+
+export const RayPulse = /*#__PURE__*/ createComponent("ray-pulse", {
+  displayName: "RayPulse",
+  properties: ["variant", "count", "shape", "fade", "direction", "color", "size", "label"],
+  events: {  },
+});

package/components/textarea.js

@@ -6,5 +6,5 @@ import { createComponent } from "../create.js";
 export const RayTextarea = /*#__PURE__*/ createComponent("ray-textarea", {
   displayName: "RayTextarea",
   properties: ["value", "rows", "autosize", "maxRows", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "readonly", "size", "variant", "highlight", "complete", "suggestionsLabel", "radius"],
-  events: { onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
+  events: { onRayComplete: "ray-complete", onRayHighlightHover: "ray-highlight-hover", onInput: "input", onChange: "change" },
 });

package/index.d.ts

@@ -550,6 +550,8 @@ export interface RayInputOwnProps {
   list?: string;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -632,6 +634,8 @@ export interface RayModeInputOwnProps {
   onRayModeChange?: (event: CustomEvent<{ mode: string; previous: string | null; option: Ray.ModeOption }>) => void;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -766,6 +770,8 @@ export interface RayPasswordInputOwnProps {
   onRayVisibilityChange?: (event: CustomEvent<{ visible: boolean }>) => void;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -846,6 +852,8 @@ export interface RayPathInputOwnProps {
   onRayError?: (event: CustomEvent<{ error: Error }>) => void;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
 }
@@ -1174,6 +1182,8 @@ export interface RayTextareaOwnProps {
   wrap?: string;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit. */
   onInput?: (event: Event) => void;
   /** When an edit is committed. */
@@ -1598,6 +1608,8 @@ export interface RayMenuOwnProps {
   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;
+  /** What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it. */
+  anchor?: Element | DOMRect | (() => DOMRect) | null;
   /** Gap to the anchor in px. */
   offset?: number;
   /** An item was chosen; detail: { value, item }. */
@@ -1650,6 +1662,8 @@ export interface RayPopoverOwnProps {
   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;
+  /** What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it. */
+  anchor?: Element | DOMRect | (() => DOMRect) | null;
   /** Panel width (px number or CSS length). Default: its content. */
   width?: string;
   /** At least as wide as the trigger. */
@@ -2141,6 +2155,28 @@ export type RayProgressProps = RayProgressOwnProps & Omit<React.HTMLAttributes<R
 /** <ray-progress> as a React component. */
 export declare const RayProgress: React.ForwardRefExoticComponent<RayProgressProps & React.RefAttributes<Ray.RayProgress>>;
 
+export interface RayPulseOwnProps {
+  /** The figure: cluster (three concentric circles breathing out of phase), breathe (one dot over a halo), ripple (rings expanding from a dot) or dots (three in a row, in sequence). */
+  variant?: "cluster" | "breathe" | "ripple" | "dots";
+  /** Number of circles, 1 to 5 (more are clamped). Default: the variant's. */
+  count?: number;
+  /** Filled discs (concentric ones fade with size, see --ray-pulse-floor) or outlined rings. Default: the variant's. */
+  shape?: "filled" | "ring";
+  /** Whether a cycle ends transparent; the bare attribute means out. Default: the variant's (ripple and dots fade). */
+  fade?: "out" | "none";
+  /** alternate goes there and back; normal goes one way and restarts (with fade: the ripple). Default: the variant's. */
+  direction?: "alternate" | "normal";
+  /** A palette color or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Height of the figure (the dots variant is wider). */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Text read by screen readers. */
+  label?: string;
+}
+export type RayPulseProps = RayPulseOwnProps & Omit<React.HTMLAttributes<Ray.RayPulse>, keyof RayPulseOwnProps> & { children?: React.ReactNode };
+/** <ray-pulse> as a React component. */
+export declare const RayPulse: React.ForwardRefExoticComponent<RayPulseProps & React.RefAttributes<Ray.RayPulse>>;
+
 export interface RayRingProgressOwnProps {
   /** Progress, from 0 to max. Unset: indeterminate (a spinning arc). */
   value?: number;

package/index.js

@@ -58,6 +58,7 @@ export { RayAlert } from "./components/alert.js";
 export { RayEmptyState } from "./components/empty-state.js";
 export { RayNotification, RayToaster } from "./components/notification.js";
 export { RayProgress } from "./components/progress.js";
+export { RayPulse } from "./components/pulse.js";
 export { RayRingProgress } from "./components/ring-progress.js";
 export { RaySkeleton } from "./components/skeleton.js";
 export { RaySpinner } from "./components/spinner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/react",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "React wrappers of the ray-elements web components",
   "license": "Apache-2.0",
   "keywords": ["web-components", "design-system", "ui", "raylang", "react"],
@@ -28,7 +28,7 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@raylang/elements": "^0.10.0",
+    "@raylang/elements": "^0.12.0",
     "react": ">=18"
   }
 }