@tensor_1/react 2.39.0 → 2.40.1

package/dist/components/ToggleRow.d.ts

@@ -2,12 +2,19 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface ToggleRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The row's visible label. It is the switch's `<label>`: clicking it flips the switch, and it names the switch. */
     label: ReactNode;
+    /** Shown under the label and announced as the switch's description (`aria-describedby`). */
     description?: ReactNode;
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;
-    accessibleLabel: string;
+    /**
+     * The switch's name when the visible label is not text (an icon, an image).
+     * Leave it out for a text label: the label already names the switch, and a
+     * repeated `aria-label` would replace it.
+     */
+    accessibleLabel?: string;
 }
 declare function ToggleRow({ label, description, checked, onCheckedChange, disabled, accessibleLabel, className, ...props }: ToggleRowProps): react.JSX.Element;
 

package/dist/components/ToggleRow.js

@@ -1,14 +1,28 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cx } from "../cx.js";
 import { Switch } from "./Switch.js";
 function ToggleRow({ label, description, checked, onCheckedChange, disabled, accessibleLabel, className, ...props }) {
+  const id = useId();
+  const switchId = `${id}-switch`;
+  const descriptionId = `${id}-description`;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-toggle-row", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-toggle-row__copy", children: [
-      /* @__PURE__ */ jsx("div", { className: "uix-toggle-row__label", children: label }),
-      description != null && /* @__PURE__ */ jsx("div", { className: "uix-toggle-row__description", children: description })
+      /* @__PURE__ */ jsx("div", { className: "uix-toggle-row__label", children: /* @__PURE__ */ jsx("label", { htmlFor: switchId, children: label }) }),
+      description != null && /* @__PURE__ */ jsx("div", { className: "uix-toggle-row__description", id: descriptionId, children: description })
     ] }),
-    /* @__PURE__ */ jsx(Switch, { checked, disabled, "aria-label": accessibleLabel, onChange: (event) => onCheckedChange(event.currentTarget.checked) })
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        id: switchId,
+        checked,
+        disabled,
+        ...accessibleLabel ? { "aria-label": accessibleLabel } : {},
+        ...description != null ? { "aria-describedby": descriptionId } : {},
+        onChange: (event) => onCheckedChange(event.currentTarget.checked)
+      }
+    )
   ] });
 }
 export {

package/dist/icons/Icon.d.ts

@@ -5,30 +5,30 @@ import { IconNode, UixIcon, IconProps } from './types.js';
 /** Renders a glyph as an inline SVG; the props contract shared by every icon. */
 declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, className, style, ...rest }: IconProps, ref?: unknown): react.ReactElement<{
     string?: number | string | undefined | undefined;
-    target?: string | undefined | undefined;
     filter?: string | undefined | undefined;
-    fill: string;
     values?: string | undefined | undefined;
+    fill: string;
+    color?: string | undefined | undefined;
+    fontStyle?: number | string | undefined | undefined;
+    fontWeight?: number | string | undefined | undefined;
+    fontSize?: number | string | undefined | undefined;
+    fontFamily?: string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    height?: number | string | undefined | undefined;
     type?: string | undefined | undefined;
+    z?: number | string | undefined | undefined;
+    opacity?: number | string | undefined | undefined;
+    r?: number | string | undefined | undefined;
+    target?: string | undefined | undefined;
     min?: number | string | undefined | undefined;
     max?: number | string | undefined | undefined;
     name?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    width?: number | string | undefined | undefined;
     rotate?: number | string | undefined | undefined;
     offset?: number | string | undefined | undefined;
     overflow?: number | string | undefined | undefined;
-    fontStyle?: number | string | undefined | undefined;
-    fontWeight?: number | string | undefined | undefined;
-    fontFamily?: string | undefined | undefined;
-    fontSize?: number | string | undefined | undefined;
-    opacity?: number | string | undefined | undefined;
-    height?: number | string | undefined | undefined;
     end?: number | string | undefined | undefined;
     scale?: number | string | undefined | undefined;
     to?: number | string | undefined | undefined;
-    z?: number | string | undefined | undefined;
-    r?: number | string | undefined | undefined;
     x?: number | string | undefined | undefined;
     cursor?: number | string | undefined | undefined;
     id?: string | undefined | undefined;