@raylang/react 0.6.0 → 0.8.0

package/components/icon.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayIcon = /*#__PURE__*/ createComponent("ray-icon", {
   displayName: "RayIcon",
-  properties: ["name", "size", "label", "color", "stroke"],
+  properties: ["name", "filled", "mirror", "size", "label", "color", "stroke"],
   events: {  },
 });

package/components/step-dots.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayStepDots = /*#__PURE__*/ createComponent("ray-step-dots", {
   displayName: "RayStepDots",
-  properties: ["count", "value", "color", "size", "align", "label"],
+  properties: ["count", "value", "color", "size", "align", "label", "valueText", "doneText"],
   events: {  },
 });

package/index.d.ts

@@ -188,8 +188,8 @@ export interface RayCheckboxOwnProps {
   color?: string;
   /** Box and font size. */
   size?: "xs" | "sm" | "md" | "lg" | "xl";
-  /** Side of the label. */
-  labelPosition?: "right" | "left";
+  /** Side of the label: start/end follow the writing direction; left/right are sides of the screen. */
+  labelPosition?: "end" | "start" | "right" | "left";
   /** Corner radius. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** Description before or after the control. */
@@ -994,8 +994,8 @@ export interface RaySwitchOwnProps {
   description?: string;
   /** Error text. */
   error?: string;
-  /** Side of the label. */
-  labelPosition?: "right" | "left";
+  /** Side of the label: start/end follow the writing direction; left/right are sides of the screen. */
+  labelPosition?: "end" | "start" | "right" | "left";
   /** Track color when on. */
   color?: string;
   /** Track size. */
@@ -1102,8 +1102,8 @@ export interface RayBottomNavItemOwnProps {
   value?: string;
   /** The label. */
   label?: string;
-  /** An icon of the registry (or put one in the icon slot). */
-  icon?: string;
+  /** An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is). */
+  icon?: Ray.IconName;
   /** Makes it a link. */
   href?: string;
   /** A count or a short text on the icon. */
@@ -1206,8 +1206,8 @@ export interface RaySidebarOwnProps {
   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";
+  /** The edge it sits on (its border faces the content, its narrow-screen drawer slides from there): start/end follow the writing direction; left/right are sides of the screen. */
+  side?: "start" | "end" | "left" | "right";
   /** A panel against the edge, or a floating card with a margin. */
   variant?: "sidebar" | "floating";
   /** Width when expanded (CSS length). Default 16rem. */
@@ -1242,8 +1242,8 @@ export interface RayStepperOwnProps {
   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";
+  /** Label beside the number (after it in the reading direction), or under it (narrow screens, many steps). "left", its former name, still works. */
+  iconPosition?: "start" | "top" | "left";
   /** Completed steps are buttons that go back to them. */
   allowStepSelect?: boolean;
   /** With allow-step-select off, false lets the user jump to any step. */
@@ -1392,8 +1392,8 @@ export interface RayDrawerOwnProps {
   label?: string;
   /** A line under the title (the drawer's accessible description). */
   description?: string;
-  /** The edge it slides from. */
-  position?: "right" | "left" | "top" | "bottom";
+  /** The edge it slides from: start/end follow the writing direction; left/right are sides of the screen. */
+  position?: "end" | "start" | "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). */
@@ -1420,7 +1420,7 @@ export declare const RayDrawer: React.ForwardRefExoticComponent<RayDrawerProps &
 export interface RayMenuOwnProps {
   /** Shown. */
   open?: boolean;
-  /** Preferred side and alignment. */
+  /** Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, "bottom-start" lines up the right edges). */
   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;
@@ -1468,7 +1468,7 @@ export declare const RayMenuDivider: React.ForwardRefExoticComponent<RayMenuDivi
 export interface RayPopoverOwnProps {
   /** Shown. */
   open?: boolean;
-  /** Preferred side and alignment. */
+  /** Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, "bottom-start" lines up the right edges). */
   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;
@@ -1492,7 +1492,7 @@ export declare const RayPopover: React.ForwardRefExoticComponent<RayPopoverProps
 export interface RayTooltipOwnProps {
   /** Tooltip text. */
   label?: string;
-  /** Preferred side. */
+  /** Preferred side; -start/-end follow the writing direction. */
   placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
   /** ms before showing. */
   openDelay?: number;
@@ -1518,8 +1518,8 @@ export interface RayAccordionOwnProps {
   multiple?: boolean;
   /** Visual style. */
   variant?: "default" | "contained" | "separated" | "filled";
-  /** Side of the chevron. */
-  chevronPosition?: "right" | "left";
+  /** Side of the chevron: start/end follow the writing direction; left/right are sides of the screen. */
+  chevronPosition?: "end" | "start" | "right" | "left";
   /** The user opened or closed an item. */
   onChange?: (event: Event) => void;
 }
@@ -1629,7 +1629,7 @@ export interface RayBlockquoteOwnProps {
   /** 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;
+  icon?: Ray.IconName;
   /** 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. */
@@ -1709,7 +1709,11 @@ export declare const RayCode: React.ForwardRefExoticComponent<RayCodeProps & Rea
 
 export interface RayIconOwnProps {
   /** Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check). */
-  name?: string;
+  name?: Ray.IconName;
+  /** The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle. */
+  filled?: boolean;
+  /** Mirrored in a right-to-left context (dir="rtl"), for an icon that points along the text: back, forward, send, undo. The roles that do (ui.next, ui.previous, ui.first, ui.last, ui.disclosure, ui.separator) mirror by themselves. */
+  mirror?: boolean;
   /** xs…xl or any CSS length. Default: 1em. */
   size?: string;
   /** Accessible name; without it the icon is decorative (hidden from screen readers). */
@@ -1828,8 +1832,8 @@ export declare const RayTable: React.ForwardRefExoticComponent<RayTableProps & R
 export interface RayTimelineOwnProps {
   /** Index of the last reached item (-1: none). */
   active?: number;
-  /** Side of the line. */
-  align?: "left" | "right";
+  /** Side of the line: start/end follow the writing direction; left/right are sides of the screen. */
+  align?: "start" | "end" | "left" | "right";
   /** Bullet size: px as a number or a CSS length (default 20px). */
   bulletSize?: string;
   /** Line width in px (default 2). */
@@ -1849,7 +1853,7 @@ export interface RayTimelineItemOwnProps {
   /** When ("2 h ago", a date). */
   time?: string;
   /** An icon of the registry in the bullet. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Its own color (a failed step in red). */
   color?: string;
   /** The line to the next item (dashed: not happened yet). */
@@ -1869,7 +1873,7 @@ export interface RayAlertOwnProps {
   /** Corner radius. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl";
   /** A registered icon name, or none. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** A close button; closing hides the alert (cancel ray-close to keep it). */
   closable?: boolean;
   /** Accessible name of the close button. */
@@ -1899,7 +1903,7 @@ export interface RayNotificationOwnProps {
   /** 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;
+  icon?: Ray.IconName;
   /** Shows a spinner (notify() does not auto-close it). */
   loading?: boolean;
   /** No close button. */
@@ -1918,8 +1922,8 @@ export type RayNotificationProps = RayNotificationOwnProps & Omit<React.HTMLAttr
 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";
+  /** Corner of the stack: -start/-end follow the writing direction; -left/-right are sides of the screen. */
+  position?: "bottom-end" | "bottom-start" | "bottom-center" | "top-end" | "top-start" | "top-center" | "bottom-right" | "bottom-left" | "top-right" | "top-left";
   /** Maximum kept; the oldest go first. */
   limit?: number;
   /** Toasts shown in the collapsed stack (the rest wait, hidden). */
@@ -2022,8 +2026,12 @@ export interface RayStepDotsOwnProps {
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   /** Where the row sits in its width. */
   align?: "start" | "center" | "end";
-  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). */
+  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). In another language, use value-text. */
   label?: string;
+  /** The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text="Asalto {step} de {count}". Default: "<label> {step} of {count}". */
+  valueText?: string;
+  /** The announced text once every step is done (value = count), with {count}. Default: value-text, else "{count} of {count}, done". */
+  doneText?: string;
 }
 export type RayStepDotsProps = RayStepDotsOwnProps & Omit<React.HTMLAttributes<Ray.RayStepDots>, keyof RayStepDotsOwnProps> & { children?: React.ReactNode };
 /** <ray-step-dots> as a React component. */
@@ -2160,8 +2168,8 @@ export interface RayScrollAreaOwnProps {
   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;
+  /** The end came within threshold (once per arrival): the bottom, or the right when horizontal (the left right to left). */
+  onRayReachEnd?: (event: CustomEvent<{ edge: "bottom" | "right" | "left" }>) => void;
 }
 export type RayScrollAreaProps = RayScrollAreaOwnProps & Omit<React.HTMLAttributes<Ray.RayScrollArea>, keyof RayScrollAreaOwnProps> & { children?: React.ReactNode };
 /** <ray-scroll-area> as a React component. */
@@ -2172,8 +2180,8 @@ export interface RaySeparatorOwnProps {
   orientation?: "horizontal" | "vertical";
   /** Text in the middle of a horizontal rule. */
   label?: string;
-  /** Where the label sits. */
-  labelPosition?: "left" | "center" | "right";
+  /** Where the label sits: start/end follow the writing direction; left/right are sides of the screen. */
+  labelPosition?: "start" | "center" | "end" | "left" | "right";
   /** Thickness (1–5px). */
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   /** Line style. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/react",
-  "version": "0.6.0",
+  "version": "0.8.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.6.0",
+    "@raylang/elements": "^0.8.0",
     "react": ">=18"
   }
 }