rift-ds 1.0.0

package/components/Prose/Prose.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+/** Props owned by Prose itself — everything else falls through to the root element. */
+type ProseOwnProps = {
+    /** Body scale. `sm` maps paragraphs, lists and code to the small paragraph tokens for dense chat contexts. */
+    size?: 'default' | 'sm';
+    /** Additional CSS classes */
+    className?: string;
+    /** The rendered markup to style — the output of whatever markdown renderer the consumer uses. */
+    children?: React.ReactNode;
+};
+export interface ProseProps extends ProseOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ProseOwnProps> {
+}
+/**
+ * Prose is the typography kit for rendered markdown and rich agent output.
+ * The package ships no markdown renderer: consumers render markdown with
+ * whatever library they already use and wrap the result in Prose, which
+ * styles the descendant elements — headings, paragraphs, lists, links,
+ * code, quotes, tables — with the token scale.
+ */
+export declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Prose/Prose.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Prose.css";
+const Prose = React.forwardRef(
+  ({ size = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-prose";
+    const classes = [baseClass, size === "sm" ? `${baseClass}--sm` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children });
+  }
+);
+Prose.displayName = "Prose";
+export {
+  Prose
+};

package/components/Quote/Quote.css

@@ -0,0 +1,78 @@
+/* ============================================
+   QUOTE COMPONENT
+   Inline blockquote or large pull-quote with
+   optional attribution.
+   ============================================ */
+
+.ds-quote {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+}
+
+.ds-quote__text {
+  margin: 0;
+}
+
+/* ============================================
+   VARIANT — DEFAULT (inline blockquote)
+   ============================================ */
+
+.ds-quote--default .ds-quote__text {
+  padding-left: var(--padding-500);
+  border-left: var(--border-050) solid var(--color-bg-container-tertiary);
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-quote--default .ds-quote__caption {
+  padding-left: var(--padding-500);
+}
+
+/* ============================================
+   VARIANT — PULL (large display quote)
+   Display type per the weight-contrast rule —
+   no border, the scale is the emphasis.
+   ============================================ */
+
+.ds-quote--pull .ds-quote__text {
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   ATTRIBUTION
+   ============================================ */
+
+.ds-quote__caption {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+}
+
+.ds-quote__attribution {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-quote__detail {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}

package/components/Quote/Quote.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface QuoteProps {
+    /** The quote text */
+    children: React.ReactNode;
+    /** Who said it, e.g. "Jordan Reyes" */
+    attribution?: string;
+    /** Context under the attribution, e.g. "Design Lead, Northlight" */
+    detail?: string;
+    /** `default` is an inline blockquote; `pull` is a large display pull-quote */
+    variant?: 'default' | 'pull';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Quote component — an inline blockquote or a large pull-quote,
+ * with optional attribution.
+ */
+export declare const Quote: ({ children, attribution, detail, variant, className, }: QuoteProps) => React.JSX.Element;

package/components/Quote/Quote.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Quote.css";
+const Quote = ({
+  children,
+  attribution,
+  detail,
+  variant = "default",
+  className = ""
+}) => {
+  const baseClass = "ds-quote";
+  const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
+    /* @__PURE__ */ jsx("blockquote", { className: `${baseClass}__text`, children }),
+    (attribution || detail) && /* @__PURE__ */ jsxs("figcaption", { className: `${baseClass}__caption`, children: [
+      attribution && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__attribution`, children: [
+        "— ",
+        attribution
+      ] }),
+      detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: detail })
+    ] })
+  ] });
+};
+export {
+  Quote
+};

package/components/RadioButton/RadioButton.css

@@ -0,0 +1,151 @@
+/* ============================================
+   RADIO BUTTON COMPONENT
+   Custom radio with animated dot indicator
+   ============================================ */
+
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-200); /* 8px */
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ============================================
+   CIRCLE (outer ring)
+   ============================================ */
+
+.ds-radio__circle {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border: var(--border-050) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill); /* 999px — perfect circle */
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   DOT (inner fill)
+   ============================================ */
+
+.ds-radio__dot {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-action-primary-bg);
+  transform: scale(0);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-radio__label {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   CHECKED STATE
+   ============================================ */
+
+.ds-radio--checked .ds-radio__circle {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-radio--checked .ds-radio__dot {
+  transform: scale(1);
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-radio:not(.ds-radio--disabled):hover .ds-radio__circle {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-radio--checked:not(.ds-radio--disabled):hover .ds-radio__circle {
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-radio--checked:not(.ds-radio--disabled):hover .ds-radio__dot {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-radio:focus-visible .ds-radio__circle {
+  outline: var(--border-050) solid var(--color-action-primary-border-tertiary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-radio--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Helper line: label and helper stack in a text column beside the circle;
+   the circle aligns to the first text line rather than the column's centre. */
+.ds-radio--has-helper {
+  align-items: flex-start;
+}
+
+.ds-radio__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+}
+
+.ds-radio__helper {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-radio--error .ds-radio__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   RADIO GROUP
+   ============================================ */
+
+.ds-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* The group label is Field's (ds-field__label) — the group composes
+   <Field group>, so the scaffolding classes come from Field.css. */
+
+.ds-radio-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+}
+
+.ds-radio-group--horizontal .ds-radio-group__options {
+  flex-direction: row;
+  gap: var(--gap-500); /* 20px */
+}

package/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+/** Props owned by RadioButton itself — everything else falls through to the wrapper. */
+type RadioButtonOwnProps = {
+    /** Label text */
+    label?: string;
+    /** Helper or error message rendered under the label text */
+    helperText?: string;
+    /**
+     * Error state — recolours the helper text. Deliberately no `aria-invalid`:
+     * ARIA does not allow it on `role="radio"`; group-level errors carry it on
+     * the radiogroup via RadioGroup's `error`.
+     */
+    error?: boolean;
+    /** Whether this radio is selected */
+    checked?: boolean;
+    /** Whether the radio is disabled */
+    disabled?: boolean;
+    /** Value for this radio option */
+    value?: string;
+    /** Called with this radio's value when selected */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Legacy form-field name.
+     *
+     * @deprecated No-op. This component renders a `<div role="radio">`, not a
+     * native `<input type="radio">`, so it does not group by name or participate
+     * in native form submission — `RadioGroup` handles grouping in React state.
+     * Declared only so the attribute is not forwarded to an element that rejects it.
+     */
+    name?: string;
+};
+export interface RadioButtonProps extends RadioButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioButtonOwnProps> {
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
+type RadioGroupOwnProps = {
+    /** Group label */
+    label?: string;
+    /** Helper or error message rendered below the group */
+    helperText?: string;
+    /** Error state — recolours the helper text and marks the group invalid */
+    error?: boolean;
+    /** Marks the group required and renders the required marker on its label */
+    required?: boolean;
+    /** Currently selected value */
+    value?: string;
+    /**
+     * Legacy grouping name, never used.
+     *
+     * @deprecated No-op. Grouping is React state (`value`/`onValueChange`), not
+     * native `name` semantics — the group renders `role="radiogroup"` over
+     * `<div role="radio">`s, so there is nothing for a name to group.
+     */
+    name?: string;
+    /** Radio options */
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Called with the newly selected value */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
+    onChange?: (value: string) => void;
+};
+export interface RadioGroupProps extends RadioGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps> {
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/RadioButton/RadioButton.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId } from "react";
+import { Field } from "../Field/Field.js";
+import "./RadioButton.css";
+const RadioButton = React.forwardRef(
+  ({
+    label,
+    helperText,
+    error = false,
+    checked = false,
+    disabled = false,
+    value = "",
+    onValueChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name: _name,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-radio";
+    const generatedId = useId();
+    const helperId = helperText ? `${generatedId}-helper` : void 0;
+    const describedBy = helperId ?? rest["aria-describedby"];
+    const classes = [
+      baseClass,
+      checked ? `${baseClass}--checked` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      helperText ? `${baseClass}--has-helper` : "",
+      error ? `${baseClass}--error` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const select = () => {
+      if (disabled) return;
+      onValueChange?.(value);
+      onChange?.(value);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      select();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        select();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "radio",
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        "aria-label": rest["aria-label"] || ariaLabel || label,
+        "aria-describedby": describedBy,
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__circle`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__dot` }) }),
+          helperText ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+            label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__helper`, id: helperId, children: helperText })
+          ] }) : label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
+  }
+);
+RadioButton.displayName = "RadioButton";
+const RadioGroup = React.forwardRef(
+  ({
+    label,
+    helperText,
+    error = false,
+    required = false,
+    value,
+    name: _name,
+    options,
+    direction = "vertical",
+    onValueChange,
+    onChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-radio-group";
+    const classes = [baseClass, `${baseClass}--${direction}`, className].filter(Boolean).join(" ");
+    const generatedId = useId();
+    const groupId = id || generatedId;
+    const labelId = label ? `${groupId}-label` : void 0;
+    const describedBy = helperText ? `${groupId}-helper` : rest["aria-describedby"];
+    const handleSelect = (next) => {
+      onValueChange?.(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        ...rest,
+        ref,
+        className: classes,
+        group: true,
+        label,
+        helperText,
+        error,
+        required,
+        id: groupId,
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": error || void 0,
+        children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
+          RadioButton,
+          {
+            label: option.label,
+            value: option.value,
+            checked: value === option.value,
+            disabled: option.disabled,
+            onValueChange: handleSelect
+          },
+          option.value
+        )) })
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+export {
+  RadioButton,
+  RadioGroup
+};

package/components/Rating/Rating.css

@@ -0,0 +1,74 @@
+/* ============================================
+   RATING COMPONENT
+   Star-scale rating control
+   ============================================ */
+
+.ds-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+}
+
+/* ============================================
+   STEPS
+   ============================================ */
+
+.ds-rating__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-icon-secondary);
+  border-radius: var(--radius-100);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-rating__icon {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-rating--compact .ds-rating__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-rating__step--filled {
+  color: var(--color-core-accent-gold);
+}
+
+.ds-rating__step--filled .ds-rating__icon {
+  --material-symbols-fill: 1;
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+.ds-rating__step:hover {
+  transform: scale(1.1);
+}
+
+.ds-rating__step:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-rating--read-only .ds-rating__step {
+  cursor: default;
+}
+
+.ds-rating--read-only .ds-rating__step:hover {
+  transform: none;
+}
+
+.ds-rating--disabled .ds-rating__step {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-rating--disabled .ds-rating__step:hover {
+  transform: none;
+}

package/components/Rating/Rating.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by Rating itself — everything else falls through to the root node. */
+type RatingOwnProps = {
+    /** Current rating (controlled). 0 means no rating. */
+    value?: number;
+    /** Initial rating for uncontrolled use. 0 means no rating. */
+    defaultValue?: number;
+    /** Number of steps on the scale */
+    max?: number;
+    /**
+     * Convenience callback receiving the new rating directly.
+     * Fires on every selection, including a clear back to 0 via `allowClear`.
+     */
+    onValueChange?: (value: number) => void;
+    /** Display-only mode — renders the current rating with no interaction */
+    readOnly?: boolean;
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Selecting the already-selected step clears the rating back to 0 */
+    allowClear?: boolean;
+    /** Glyph drawn for each step — Material Symbol name (string) or custom element (ReactNode). A string glyph solidifies on filled steps via the font's fill axis; a custom element should draw with `currentColor` so the filled colour still reads. */
+    icon?: string | React.ReactNode;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Accessible name for the group, and the base of each step's label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface RatingProps extends RatingOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RatingOwnProps> {
+}
+/**
+ * Star-scale rating control. Behaves as a radio group: each step is a
+ * `role="radio"` button, arrow keys move the selection, and the current
+ * step holds the roving tab stop. `readOnly` renders the same row as a
+ * static image with a spoken "N out of M" label.
+ *
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+export {};