@raylang/react 0.0.0-stage → 0.4.0

package/components/indicator.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/indicator";
+import { createComponent } from "../create.js";
+
+export const RayIndicator = /*#__PURE__*/ createComponent("ray-indicator", {
+  displayName: "RayIndicator",
+  properties: ["label", "position", "offset", "color", "size", "radius", "max", "inline", "withBorder", "processing", "disabled"],
+  events: {  },
+});

package/components/input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/input";
+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"],
+  events: { onInput: "input", onChange: "change" },
+});

package/components/kbd.js

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

package/components/menu.js

@@ -0,0 +1,25 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/menu";
+import { createComponent } from "../create.js";
+
+export const RayMenu = /*#__PURE__*/ createComponent("ray-menu", {
+  displayName: "RayMenu",
+  properties: ["open", "placement", "context", "keepOpen", "native", "offset"],
+  events: { onRaySelect: "ray-select", onRayOpen: "ray-open", onRayClose: "ray-close" },
+});
+export const RayMenuItem = /*#__PURE__*/ createComponent("ray-menu-item", {
+  displayName: "RayMenuItem",
+  properties: ["value", "disabled", "color"],
+  events: {  },
+});
+export const RayMenuLabel = /*#__PURE__*/ createComponent("ray-menu-label", {
+  displayName: "RayMenuLabel",
+  properties: [],
+  events: {  },
+});
+export const RayMenuDivider = /*#__PURE__*/ createComponent("ray-menu-divider", {
+  displayName: "RayMenuDivider",
+  properties: [],
+  events: {  },
+});

package/components/nav-link.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/nav-link";
+import { createComponent } from "../create.js";
+
+export const RayNavLink = /*#__PURE__*/ createComponent("ray-nav-link", {
+  displayName: "RayNavLink",
+  properties: ["label", "description", "href", "active", "opened", "disabled", "variant", "color", "iconOnly"],
+  events: { onRayToggle: "ray-toggle" },
+});

package/components/notification.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/notification";
+import { createComponent } from "../create.js";
+
+export const RayNotification = /*#__PURE__*/ createComponent("ray-notification", {
+  displayName: "RayNotification",
+  properties: ["label", "color", "icon", "loading", "hideClose", "withBorder", "actionLabel"],
+  events: { onRayClose: "ray-close", onRayAction: "ray-action" },
+});
+export const RayToaster = /*#__PURE__*/ createComponent("ray-toaster", {
+  displayName: "RayToaster",
+  properties: ["position", "limit", "visible", "expand", "gap"],
+  events: {  },
+});

package/components/number-input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/number-input";
+import { createComponent } from "../create.js";
+
+export const RayNumberInput = /*#__PURE__*/ createComponent("ray-number-input", {
+  displayName: "RayNumberInput",
+  properties: ["value", "min", "max", "step", "decimals", "prefix", "suffix", "thousandsSeparator", "decimalSeparator", "clamp", "hideControls", "placeholder", "readonly", "name", "label", "description", "error", "required", "disabled", "size", "radius", "variant", "descriptionPosition"],
+  events: { onInput: "input", onChange: "change" },
+});

package/components/pagination.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/pagination";
+import { createComponent } from "../create.js";
+
+export const RayPagination = /*#__PURE__*/ createComponent("ray-pagination", {
+  displayName: "RayPagination",
+  properties: ["total", "value", "siblings", "boundaries", "withEdges", "hideControls", "color", "size", "radius", "disabled", "label"],
+  events: { onChange: "change" },
+});

package/components/password-input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/password-input";
+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"],
+  events: { onRayVisibilityChange: "ray-visibility-change", onInput: "input", onChange: "change" },
+});

package/components/path-input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/path-input";
+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"],
+  events: { onChange: "change", onRayError: "ray-error", onInput: "input" },
+});

package/components/popover.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/popover";
+import { createComponent } from "../create.js";
+
+export const RayPopover = /*#__PURE__*/ createComponent("ray-popover", {
+  displayName: "RayPopover",
+  properties: ["open", "placement", "offset", "width", "matchWidth", "padding", "trapFocus"],
+  events: { onRayOpen: "ray-open", onRayClose: "ray-close" },
+});

package/components/progress.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/progress";
+import { createComponent } from "../create.js";
+
+export const RayProgress = /*#__PURE__*/ createComponent("ray-progress", {
+  displayName: "RayProgress",
+  properties: ["value", "max", "color", "size", "radius", "striped", "animated", "showValue", "label"],
+  events: {  },
+});

package/components/radio.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/radio";
+import { createComponent } from "../create.js";
+
+export const RayRadioGroup = /*#__PURE__*/ createComponent("ray-radio-group", {
+  displayName: "RayRadioGroup",
+  properties: ["value", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "orientation", "size", "color", "variant"],
+  events: { onInput: "input", onChange: "change" },
+});
+export const RayRadio = /*#__PURE__*/ createComponent("ray-radio", {
+  displayName: "RayRadio",
+  properties: ["value", "label", "description", "disabled", "color", "size", "variant"],
+  events: {  },
+});

package/components/scroll-area.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/scroll-area";
+import { createComponent } from "../create.js";
+
+export const RayScrollArea = /*#__PURE__*/ createComponent("ray-scroll-area", {
+  displayName: "RayScrollArea",
+  properties: ["height", "maxHeight", "orientation", "type", "noShadows", "threshold", "label"],
+  events: { onRayReachEnd: "ray-reach-end" },
+});

package/components/search.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/search";
+import { createComponent } from "../create.js";
+
+export const RaySearch = /*#__PURE__*/ createComponent("ray-search", {
+  displayName: "RaySearch",
+  properties: ["value", "placeholder", "shortcut", "debounce", "name", "label", "disabled", "size", "radius", "variant", "description", "error", "required", "descriptionPosition"],
+  events: { onInput: "input", onRaySearch: "ray-search" },
+});

package/components/segmented-control.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/segmented-control";
+import { createComponent } from "../create.js";
+
+export const RaySegmentedControl = /*#__PURE__*/ createComponent("ray-segmented-control", {
+  displayName: "RaySegmentedControl",
+  properties: ["value", "data", "name", "color", "size", "radius", "fullWidth", "orientation", "disabled"],
+  events: { onInput: "input", onChange: "change" },
+});

package/components/select.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/select";
+import { createComponent } from "../create.js";
+
+export const RaySelect = /*#__PURE__*/ createComponent("ray-select", {
+  displayName: "RaySelect",
+  properties: ["value", "data", "placeholder", "open", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "size", "variant", "radius"],
+  events: { onInput: "input", onChange: "change", onRayOpen: "ray-open", onRayClose: "ray-close" },
+});

package/components/separator.js

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

package/components/sidebar.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/sidebar";
+import { createComponent } from "../create.js";
+
+export const RaySidebar = /*#__PURE__*/ createComponent("ray-sidebar", {
+  displayName: "RaySidebar",
+  properties: ["collapsed", "open", "side", "variant", "width", "collapsedWidth", "breakpoint", "label"],
+  events: { onRayToggle: "ray-toggle", onRayOpen: "ray-open", onRayClose: "ray-close" },
+});
+export const RaySidebarGroup = /*#__PURE__*/ createComponent("ray-sidebar-group", {
+  displayName: "RaySidebarGroup",
+  properties: ["label"],
+  events: {  },
+});

package/components/skeleton.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/skeleton";
+import { createComponent } from "../create.js";
+
+export const RaySkeleton = /*#__PURE__*/ createComponent("ray-skeleton", {
+  displayName: "RaySkeleton",
+  properties: ["width", "height", "circle", "lines", "radius", "animation", "loaded"],
+  events: {  },
+});

package/components/slider.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/slider";
+import { createComponent } from "../create.js";
+
+export const RaySlider = /*#__PURE__*/ createComponent("ray-slider", {
+  displayName: "RaySlider",
+  properties: ["value", "min", "max", "step", "name", "label", "description", "descriptionPosition", "error", "disabled", "color", "size", "showValue", "unit", "marks", "required", "radius", "variant"],
+  events: { onInput: "input", onChange: "change" },
+});

package/components/spinner.js

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

package/components/split.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/split";
+import { createComponent } from "../create.js";
+
+export const RaySplit = /*#__PURE__*/ createComponent("ray-split", {
+  displayName: "RaySplit",
+  properties: ["orientation", "position", "min", "max", "collapsed", "disabled", "autosave"],
+  events: { onRayResize: "ray-resize" },
+});

package/components/stack.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/stack";
+import { createComponent } from "../create.js";
+
+export const RayStack = /*#__PURE__*/ createComponent("ray-stack", {
+  displayName: "RayStack",
+  properties: ["gap", "align", "justify"],
+  events: {  },
+});

package/components/stat.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/stat";
+import { createComponent } from "../create.js";
+
+export const RayStat = /*#__PURE__*/ createComponent("ray-stat", {
+  displayName: "RayStat",
+  properties: ["label", "value", "diff", "diffUnit", "note", "inverse", "plain"],
+  events: {  },
+});

package/components/statusbar.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/statusbar";
+import { createComponent } from "../create.js";
+
+export const RayStatusbar = /*#__PURE__*/ createComponent("ray-statusbar", {
+  displayName: "RayStatusbar",
+  properties: ["variant"],
+  events: {  },
+});
+export const RayStatusbarItem = /*#__PURE__*/ createComponent("ray-statusbar-item", {
+  displayName: "RayStatusbarItem",
+  properties: ["action", "color", "label"],
+  events: {  },
+});

package/components/stepper.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/stepper";
+import { createComponent } from "../create.js";
+
+export const RayStepper = /*#__PURE__*/ createComponent("ray-stepper", {
+  displayName: "RayStepper",
+  properties: ["active", "orientation", "iconPosition", "allowStepSelect", "linear", "size", "color", "label"],
+  events: { onChange: "change" },
+});
+export const RayStep = /*#__PURE__*/ createComponent("ray-step", {
+  displayName: "RayStep",
+  properties: ["label", "description", "icon", "completedIcon", "loading", "error", "disabled"],
+  events: {  },
+});

package/components/switch.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/switch";
+import { createComponent } from "../create.js";
+
+export const RaySwitch = /*#__PURE__*/ createComponent("ray-switch", {
+  displayName: "RaySwitch",
+  properties: ["checked", "value", "name", "label", "description", "error", "labelPosition", "color", "size", "disabled", "indeterminate", "required", "variant", "radius", "descriptionPosition"],
+  events: { onChange: "change" },
+});

package/components/table.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/table";
+import { createComponent } from "../create.js";
+
+export const RayTable = /*#__PURE__*/ createComponent("ray-table", {
+  displayName: "RayTable",
+  properties: ["columns", "data", "rowKey", "selectable", "selection", "sort", "manualSort", "clickableRows", "striped", "withBorder", "withColumnBorders", "stickyHeader", "noHover", "density", "label", "emptyLabel"],
+  events: { onRaySort: "ray-sort", onRaySelectionChange: "ray-selection-change", onRayRowClick: "ray-row-click" },
+});

package/components/tabs.js

@@ -0,0 +1,20 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/tabs";
+import { createComponent } from "../create.js";
+
+export const RayTabs = /*#__PURE__*/ createComponent("ray-tabs", {
+  displayName: "RayTabs",
+  properties: ["value", "variant", "orientation", "color", "activation", "grow"],
+  events: { onChange: "change" },
+});
+export const RayTab = /*#__PURE__*/ createComponent("ray-tab", {
+  displayName: "RayTab",
+  properties: ["value", "disabled"],
+  events: {  },
+});
+export const RayTabPanel = /*#__PURE__*/ createComponent("ray-tab-panel", {
+  displayName: "RayTabPanel",
+  properties: ["value"],
+  events: {  },
+});

package/components/textarea.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/textarea";
+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", "radius"],
+  events: { onInput: "input", onChange: "change" },
+});

package/components/theme-toggle.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/theme-toggle";
+import { createComponent } from "../create.js";
+
+export const RayThemeToggle = /*#__PURE__*/ createComponent("ray-theme-toggle", {
+  displayName: "RayThemeToggle",
+  properties: ["size"],
+  events: { onRayThemeChange: "ray-theme-change" },
+});

package/components/timeline.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/timeline";
+import { createComponent } from "../create.js";
+
+export const RayTimeline = /*#__PURE__*/ createComponent("ray-timeline", {
+  displayName: "RayTimeline",
+  properties: ["active", "align", "bulletSize", "lineWidth", "color", "reverseActive"],
+  events: {  },
+});
+export const RayTimelineItem = /*#__PURE__*/ createComponent("ray-timeline-item", {
+  displayName: "RayTimelineItem",
+  properties: ["label", "time", "icon", "color", "lineVariant"],
+  events: {  },
+});

package/components/toggle-group.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/toggle-group";
+import { createComponent } from "../create.js";
+
+export const RayToggleGroup = /*#__PURE__*/ createComponent("ray-toggle-group", {
+  displayName: "RayToggleGroup",
+  properties: ["type", "value", "name", "required", "disabled", "spaced", "variant", "color", "size", "radius", "square", "orientation", "fullWidth", "label"],
+  events: { onChange: "change" },
+});

package/components/toggle.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/toggle";
+import { createComponent } from "../create.js";
+
+export const RayToggle = /*#__PURE__*/ createComponent("ray-toggle", {
+  displayName: "RayToggle",
+  properties: ["pressed", "variant", "square", "label", "gradient", "color", "size", "radius", "type", "disabled", "loading", "fullWidth", "href", "target", "name", "value"],
+  events: { onChange: "change" },
+});

package/components/tooltip.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/tooltip";
+import { createComponent } from "../create.js";
+
+export const RayTooltip = /*#__PURE__*/ createComponent("ray-tooltip", {
+  displayName: "RayTooltip",
+  properties: ["label", "placement", "openDelay", "closeDelay", "color", "disabled", "open", "offset"],
+  events: {  },
+});

package/create.js

@@ -0,0 +1,64 @@
+// React wrapper factory for ray-elements custom elements (React 18 and 19).
+//
+// Declared properties are assigned as DOM properties (not attributes, so
+// booleans, arrays and objects arrive intact) after every render; declared
+// events (onRaySelect -> "ray-select") are attached with addEventListener.
+// Everything else (className, style, id, slot, aria-*, data-*, onClick…)
+// passes through to the element as usual.
+
+import * as React from "react";
+
+/**
+ * @param {string} tagName                       custom element tag
+ * @param {{ properties?: string[], events?: Record<string, string>, displayName?: string }} options
+ *   events maps a React prop name to a DOM event name: { onRaySelect: "ray-select" }
+ */
+export function createComponent(tagName, { properties = [], events = {}, displayName } = {}) {
+  const propSet = new Set(properties);
+  const Component = React.forwardRef(function RayComponent(props, ref) {
+    const elRef = React.useRef(null);
+    const passthrough = {};
+    const values = {};
+    const handlers = {};
+    for (const key of Object.keys(props)) {
+      if (key === "children") continue;
+      if (key in events) handlers[events[key]] = props[key];
+      else if (propSet.has(key)) values[key] = props[key];
+      else passthrough[key] = props[key];
+    }
+
+    // Properties: after each render, before paint.
+    React.useLayoutEffect(() => {
+      const el = elRef.current;
+      if (!el) return;
+      for (const key of Object.keys(values)) {
+        if (!Object.is(el[key], values[key])) el[key] = values[key];
+      }
+    });
+
+    // Events: one stable listener per event type, calling the latest handler.
+    const handlersRef = React.useRef(handlers);
+    handlersRef.current = handlers;
+    const typesKey = Object.keys(handlers).sort().join(",");
+    React.useLayoutEffect(() => {
+      const el = elRef.current;
+      if (!el || !typesKey) return undefined;
+      const listeners = typesKey.split(",").map((type) => {
+        const listener = (event) => handlersRef.current[type]?.(event);
+        el.addEventListener(type, listener);
+        return [type, listener];
+      });
+      return () => listeners.forEach(([type, listener]) => el.removeEventListener(type, listener));
+    }, [typesKey]);
+
+    const setRef = React.useCallback((el) => {
+      elRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    }, [ref]);
+
+    return React.createElement(tagName, { ...passthrough, ref: setRef, suppressHydrationWarning: true }, props.children);
+  });
+  Component.displayName = displayName ?? tagName;
+  return Component;
+}