rift-ds 1.0.1 → 1.2.0

package/components/Inspector/InspectorSection.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by InspectorSection itself — everything else falls through to the <section>. */
+type InspectorSectionOwnProps = {
+    /** The section's heading, shown on its header row. Not the native tooltip `title` attribute. */
+    title: string;
+    /** Whether the section is expanded (controlled). Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Whether an uncontrolled section starts expanded. */
+    defaultOpen?: boolean;
+    /** Called with the next expanded state when the header is pressed. */
+    onOpenChange?: (open: boolean) => void;
+    /** The section's controls, stacked one rhythm apart. */
+    children?: React.ReactNode;
+    /** Additional CSS classes, applied to the <section>. */
+    className?: string;
+};
+export interface InspectorSectionProps extends InspectorSectionOwnProps, Omit<React.ComponentPropsWithoutRef<'section'>, keyof InspectorSectionOwnProps> {
+}
+/**
+ * A collapsible, titled run of inspector controls: the header row toggles
+ * it, and stacked sections are divided by a hairline. The general-purpose
+ * counterpart, a bordered set of content panels, is Accordion.
+ *
+ * Two behaviours separate it from Accordion. The body clips only while
+ * closed or animating, and goes `overflow: visible` once settled open, so
+ * a Dropdown menu inside can open past the section's edge. And a closed
+ * body is `inert`, so its controls leave the tab order rather than sitting
+ * focusable at zero height. Forwards a ref to the <section> and spreads
+ * unrecognised props onto it.
+ */
+export declare const InspectorSection: React.ForwardRefExoticComponent<InspectorSectionProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/Inspector/InspectorSection.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Inspector.css";
+import "../../fonts/material-symbols.css";
+const InspectorSection = React.forwardRef(
+  ({ title, open, defaultOpen = false, onOpenChange, children, className = "", ...rest }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = open ?? uncontrolledOpen;
+    const [settled, setSettled] = useState(isOpen);
+    const baseId = React.useId();
+    const panelId = `${baseId}-panel`;
+    const headerId = `${baseId}-header`;
+    const toggle = () => {
+      const next = !isOpen;
+      setSettled(false);
+      if (open === void 0) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    };
+    const classes = [
+      "ds-inspector-section",
+      isOpen ? "ds-inspector-section--open" : "",
+      isOpen && settled ? "ds-inspector-section--settled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("section", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: headerId,
+          className: "ds-inspector-section__trigger",
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: title }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ds-inspector-section__icon material-symbols-rounded",
+                "aria-hidden": "true",
+                children: "expand_more"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": headerId,
+          className: "ds-inspector-section__panel",
+          inert: !isOpen,
+          onTransitionEnd: (event) => {
+            if (event.target !== event.currentTarget) return;
+            if (isOpen) setSettled(true);
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "ds-inspector-section__body", children })
+        }
+      )
+    ] });
+  }
+);
+InspectorSection.displayName = "InspectorSection";
+export {
+  InspectorSection
+};

package/components/Inspector/InspectorSegmentedControl.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/** One choice in an InspectorSegmentedControl. */
+export interface InspectorSegment {
+    /** The value reported when this segment is chosen. */
+    value: string;
+    /** Visible text. */
+    label: string;
+    /** Takes this one choice out of the set. */
+    disabled?: boolean;
+}
+/** Props owned by InspectorSegmentedControl itself — everything else falls through to the radiogroup. */
+type InspectorSegmentedControlOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Names the radiogroup. */
+    label: string;
+    /** The choices, drawn left to right in the bar's end. */
+    options: InspectorSegment[];
+    /** The selected value (controlled). Leave unset and use `defaultValue` for an uncontrolled set. */
+    value?: string;
+    /** The starting selection for an uncontrolled set. */
+    defaultValue?: string;
+    /** The radios' shared `name`, for native form submission. Generated when unset. */
+    name?: string;
+    /** Takes the whole set out of use. */
+    disabled?: boolean;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px. */
+    size?: 'default' | 'compact';
+    /** Called with the newly chosen value. */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes, applied to the bar. */
+    className?: string;
+};
+export interface InspectorSegmentedControlProps extends InspectorSegmentedControlOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InspectorSegmentedControlOwnProps> {
+}
+/**
+ * A one-row choice of a few options for inspector panels: the name on the
+ * left, the options as chips on the right. The selected chip takes a
+ * neutral fill, never the action colour. The form-and-toolbar counterpart,
+ * a free-standing pill strip, is SegmentedControl.
+ *
+ * Each option is a native radio, so arrow keys move the selection, the set
+ * announces as one radiogroup, and it submits with a form. A native
+ * `onChange` on the root receives each radio's bubbled change event.
+ * Forwards a ref to the root and spreads unrecognised props onto it.
+ */
+export declare const InspectorSegmentedControl: React.ForwardRefExoticComponent<InspectorSegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Inspector/InspectorSegmentedControl.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Inspector.css";
+const InspectorSegmentedControl = React.forwardRef(
+  ({
+    label,
+    options,
+    value,
+    defaultValue,
+    name,
+    disabled = false,
+    size = "default",
+    onValueChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const groupName = name ?? generatedId;
+    const labelId = `${generatedId}-label`;
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-segmented-control",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-labelledby": labelId,
+        ...rest,
+        ref,
+        className: classes,
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "ds-inspector-bar__label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-segmented-control__segments", children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: "ds-inspector-segmented-control__segment", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "ds-inspector-segmented-control__radio",
+                type: "radio",
+                name: groupName,
+                value: option.value,
+                disabled: disabled || option.disabled,
+                ...value !== void 0 ? { checked: option.value === value } : { defaultChecked: option.value === defaultValue },
+                onChange: () => onValueChange?.(option.value)
+              }
+            ),
+            option.label
+          ] }, option.value)) })
+        ]
+      }
+    );
+  }
+);
+InspectorSegmentedControl.displayName = "InspectorSegmentedControl";
+export {
+  InspectorSegmentedControl
+};

package/components/Inspector/InspectorSlider.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by InspectorSlider itself — everything else falls through to the <input type="range">. */
+type InspectorSliderOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the range's accessible name. */
+    label: string;
+    /** Current value (controlled). Leave unset and use `defaultValue` for an uncontrolled slider. */
+    value?: number;
+    /** Starting value for an uncontrolled slider. Defaults to `min`. */
+    defaultValue?: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. Also sets how many decimals the reading shows (0.02 reads "0.50"). */
+    step?: number;
+    /** Formats the reading on the right, and the value a screen reader announces. Defaults to the step's precision. */
+    format?: (value: number) => string;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px (not the native character-width `size` attribute). */
+    size?: 'default' | 'compact';
+    /**
+     * Convenience callback receiving the numeric value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature.
+     */
+    onValueChange?: (value: number) => void;
+    /** Additional CSS classes, applied to the bar rather than the <input>. */
+    className?: string;
+};
+export interface InspectorSliderProps extends InspectorSliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InspectorSliderOwnProps | 'type'> {
+}
+/**
+ * A one-row slider for inspector panels: the whole bar is the control, its
+ * fill is the value, and the name and reading sit inside it. The form
+ * counterpart, with a label above and a track, is Slider.
+ *
+ * A native range input covers the bar invisibly, so dragging anywhere,
+ * clicking to jump, the keyboard and the screen-reader semantics are the
+ * platform's. Forwards a ref to that input and spreads unrecognised props
+ * onto it.
+ */
+export declare const InspectorSlider: React.ForwardRefExoticComponent<InspectorSliderProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Inspector/InspectorSlider.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Inspector.css";
+const decimalsOf = (step) => {
+  const text = String(step);
+  const dot = text.indexOf(".");
+  return dot < 0 ? 0 : text.length - dot - 1;
+};
+const InspectorSlider = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    format,
+    size = "default",
+    disabled = false,
+    onChange,
+    onValueChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? min);
+    const current = value ?? uncontrolled;
+    const pct = max === min ? 0 : (current - min) / (max - min) * 100;
+    const reading = format ? format(current) : current.toFixed(decimalsOf(step));
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-slider",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      const next = Number(e.target.value);
+      if (value === void 0) setUncontrolled(next);
+      onChange?.(e);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes,
+        style: { "--ds-inspector-pct": `${pct}%` },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-slider__fill", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-slider__grip", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-inspector-bar__label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-bar__value", "aria-hidden": "true", children: reading }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-valuetext": reading,
+              ...rest,
+              ref,
+              id: inputId,
+              className: "ds-inspector-bar__native",
+              type: "range",
+              min,
+              max,
+              step,
+              value: current,
+              disabled,
+              onChange: handleChange
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InspectorSlider.displayName = "InspectorSlider";
+export {
+  InspectorSlider
+};

package/components/Inspector/InspectorToggleSwitch.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+/** Props owned by InspectorToggleSwitch itself — everything else falls through to the <input type="checkbox">. */
+type InspectorToggleSwitchOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the switch's accessible name. */
+    label: string;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px (not the native character-width `size` attribute). */
+    size?: 'default' | 'compact';
+    /**
+     * Convenience callback receiving the checked state directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional CSS classes, applied to the bar rather than the <input>. */
+    className?: string;
+};
+export interface InspectorToggleSwitchProps extends InspectorToggleSwitchOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InspectorToggleSwitchOwnProps | 'type'> {
+}
+/**
+ * A one-row switch for inspector panels: the whole bar is the switch, with
+ * the name on the left and a small track on the right. The form
+ * counterpart, a standalone switch with its label beside it, is
+ * ToggleSwitch.
+ *
+ * A native checkbox with `role="switch"` covers the bar, and the paint
+ * reads its `:checked` state, so `checked` and `defaultChecked` both work.
+ * Forwards a ref to that input and spreads unrecognised props onto it.
+ */
+export declare const InspectorToggleSwitch: React.ForwardRefExoticComponent<InspectorToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Inspector/InspectorToggleSwitch.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Inspector.css";
+const InspectorToggleSwitch = React.forwardRef(
+  ({
+    label,
+    size = "default",
+    disabled = false,
+    onChange,
+    onCheckedChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-toggle-switch",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-inspector-bar__label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "ds-inspector-toggle-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "ds-inspector-toggle-switch__knob" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          ref,
+          id: inputId,
+          className: "ds-inspector-bar__native",
+          type: "checkbox",
+          role: "switch",
+          disabled,
+          onChange: handleChange
+        }
+      )
+    ] });
+  }
+);
+InspectorToggleSwitch.displayName = "InspectorToggleSwitch";
+export {
+  InspectorToggleSwitch
+};

package/components/Nav/Nav.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { ButtonGroupProps } from '../ButtonGroup/ButtonGroup';
-export interface NavProps {
+/** Props owned by Nav itself — everything else falls through to the `<nav>`. */
+type NavOwnProps = {
     /** Brand/logo text */
     brandText?: string;
     /** Brand icon element (img, svg, etc.) */
@@ -11,9 +12,16 @@ export interface NavProps {
     trailing?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+};
+export interface NavProps extends NavOwnProps, Omit<React.ComponentPropsWithoutRef<'nav'>, keyof NavOwnProps> {
 }
 /**
  * Nav component from Figma design system
- * Renders a horizontal navigation bar using ButtonGroup
+ * Renders a horizontal navigation bar using ButtonGroup.
+ *
+ * The landmark is labelled "Main" by default so assistive tech can tell it
+ * apart from any other navigation on the page; pass `aria-label` to name it
+ * differently. Unrecognised props are spread onto the `<nav>`.
  */
-export declare const Nav: ({ brandText, brandIcon, buttons, trailing, className, }: NavProps) => React.JSX.Element;
+export declare const Nav: ({ brandText, brandIcon, buttons, trailing, className, ...rest }: NavProps) => React.JSX.Element;
+export {};

package/components/Nav/Nav.js

@@ -7,10 +7,11 @@ const Nav = ({
   brandIcon,
   buttons,
   trailing,
-  className = ""
+  className = "",
+  ...rest
 }) => {
   const baseClass = "ds-nav";
-  return /* @__PURE__ */ jsxs("nav", { className: `${baseClass} ${className}`, children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Main", ...rest, className: `${baseClass} ${className}`, children: [
     (brandText || brandIcon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__brand`, children: [
       brandIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand-icon`, children: brandIcon }),
       brandText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand-text`, children: brandText })

package/components/SegmentedControl/SegmentedControl.css

@@ -10,11 +10,13 @@
   gap: var(--gap-050); /* 2px */
   padding: var(--padding-100); /* 4px */
   /* Concentric with the segments, the Composer's rule: the track's
-     curve is the segment's radius plus the inset between them, so a
-     theme that squares the pill token keeps the two curves parallel
-     instead of a soft track hugging sharp segments. At the shipped
-     999px pill both terms saturate and nothing changes. */
-  border-radius: calc(var(--radius-pill) + var(--padding-100));
+     curve is the segment's radius plus the inset between them (the
+     padding and the hairline both, since the curve is drawn at the
+     border's outer edge), so a theme that squares the pill token keeps
+     the two curves parallel instead of a soft track hugging sharp
+     segments. At the shipped 999px pill every term saturates and nothing
+     changes. */
+  border-radius: calc(var(--radius-pill) + var(--padding-100) + var(--border-025));
   background-color: var(--color-bg-container-primary);
   border: var(--border-025) solid var(--color-bg-container-border);
 }