rift-ds 1.0.0

package/components/Skeleton/Skeleton.css

@@ -0,0 +1,81 @@
+/* ============================================
+   SKELETON COMPONENT
+   Placeholder while content is loading
+   ============================================ */
+
+.ds-skeleton {
+  background-color: var(--color-bg-container-secondary);
+  position: relative;
+  overflow: hidden;
+}
+
+.ds-skeleton::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-bg-container-primary) 50%,
+    transparent 100%
+  );
+  /* ds-allow(motion): the shimmer needs a symmetric in-out curve and no
+     --motion-ease-* token provides one — the duration is tokenized. */
+  animation: ds-skeleton-shimmer var(--motion-duration-loop-shimmer) ease-in-out infinite;
+}
+
+/* ============================================
+   TEXT VARIANT
+   ============================================ */
+
+.ds-skeleton--text {
+  height: 14px;
+  border-radius: var(--radius-200);
+  width: 100%;
+}
+
+/* ============================================
+   CIRCULAR VARIANT
+   ============================================ */
+
+.ds-skeleton--circular {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-pill);
+}
+
+/* ============================================
+   RECTANGULAR VARIANT
+   ============================================ */
+
+.ds-skeleton--rectangular {
+  width: 100%;
+  height: 100px;
+  border-radius: var(--radius-200);
+}
+
+/* ============================================
+   TEXT GROUP
+   ============================================ */
+
+.ds-skeleton__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-150);
+}
+
+/* ============================================
+   SHIMMER ANIMATION
+   ============================================ */
+
+@keyframes ds-skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,16 @@
+export interface SkeletonProps {
+    /** Shape of the skeleton */
+    variant?: 'text' | 'circular' | 'rectangular';
+    /** Width (CSS value, e.g. '100%', '200px') */
+    width?: string;
+    /** Height (CSS value, e.g. '20px', '100px') */
+    height?: string;
+    /** Number of text lines to render (only for text variant) */
+    lines?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Skeleton displays a placeholder while content is loading.
+ */
+export declare const Skeleton: ({ variant, width, height, lines, className, }: SkeletonProps) => import("react").JSX.Element;

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import "./Skeleton.css";
+const Skeleton = ({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className = ""
+}) => {
+  const baseClass = "ds-skeleton";
+  const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(" ");
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx("div", { className: `${baseClass}__group`, role: "status", "aria-label": "Loading", "aria-busy": "true", style: { width }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes,
+        "aria-hidden": "true",
+        style: {
+          width: i === lines - 1 ? "75%" : "100%",
+          height
+        }
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "status", "aria-label": "Loading", "aria-busy": "true", style: { width, height } });
+};
+export {
+  Skeleton
+};

package/components/Slider/Slider.css

@@ -0,0 +1,104 @@
+/* ============================================
+   SLIDER COMPONENT
+   Range input for selecting values
+   ============================================ */
+
+.ds-slider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* With Field scaffolding present (label, helper, or value readout) the row
+   becomes a column so the pieces stack; a bare slider keeps the row. */
+.ds-slider--fielded {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* The live value in Field's aside slot, opposite the helper. */
+.ds-slider__value {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================
+   INPUT — RESET & BASE
+   ============================================ */
+
+.ds-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  outline: none;
+  cursor: pointer;
+  background: var(--color-bg-container-tertiary);
+}
+
+.ds-slider--compact .ds-slider__input {
+  height: 4px;
+}
+
+/* ============================================
+   THUMB — WEBKIT
+   ============================================ */
+
+.ds-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--color-action-primary-bg);
+  border: 2px solid var(--color-action-primary-bg);
+  cursor: pointer;
+  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-slider--compact .ds-slider__input::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-slider__input::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 4px var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   THUMB — MOZ
+   ============================================ */
+
+.ds-slider__input::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--color-action-primary-bg);
+  border: 2px solid var(--color-action-primary-bg);
+  cursor: pointer;
+  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-slider--compact .ds-slider__input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-slider__input::-moz-range-thumb:hover {
+  box-shadow: 0 0 0 4px var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-slider--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/components/Slider/Slider.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+/** Props owned by Slider itself — everything else falls through to the <input type="range">. */
+type SliderOwnProps = {
+    /** Label text rendered above the slider */
+    label?: string;
+    /** Helper or error message rendered below the slider */
+    helperText?: string;
+    /** Error state — recolours the helper text and marks the slider invalid */
+    error?: boolean;
+    /** Marks the slider required and renders the required marker on its label */
+    required?: boolean;
+    /** Shows the current value opposite the helper line */
+    showValue?: boolean;
+    /** Current value */
+    value?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Component size (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
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: number) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
+    className?: string;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+};
+export interface SliderProps extends SliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof SliderOwnProps | 'type'> {
+}
+/**
+ * Slider allows selecting a value from within a given range.
+ *
+ * Forwards a ref to the underlying `<input type="range">` and spreads
+ * unrecognised props onto it.
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Slider/Slider.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useId } from "react";
+import { Field } from "../Field/Field.js";
+import "./Slider.css";
+const Slider = React.forwardRef(
+  ({
+    label,
+    helperText,
+    error = false,
+    required = false,
+    showValue = false,
+    value = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    size = "default",
+    onChange,
+    onValueChange,
+    ariaLabel,
+    className = "",
+    style,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-slider";
+    const fielded = Boolean(label || helperText || showValue);
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled ? `${baseClass}--disabled` : "",
+      fielded ? `${baseClass}--fielded` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const describedBy = helperText ? `${inputId}-helper` : rest["aria-describedby"];
+    const percentage = (value - min) / (max - min) * 100;
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(Number(e.target.value));
+    };
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        aside: showValue ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value }) : void 0,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            ref,
+            type: "range",
+            className: `${baseClass}__input`,
+            id: inputId,
+            value,
+            min,
+            max,
+            step,
+            disabled,
+            onChange: handleChange,
+            "aria-label": label ? void 0 : rest["aria-label"] || ariaLabel || "Slider",
+            "aria-describedby": describedBy,
+            "aria-invalid": error || void 0,
+            style: {
+              background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-tertiary) ${percentage}%)`,
+              ...style
+            }
+          }
+        )
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+export {
+  Slider
+};

package/components/SourceChip/SourceChip.css

@@ -0,0 +1,111 @@
+/* ============================================
+   SOURCE CHIP COMPONENT
+   Numbered citation pill linking a claim to
+   its source. Anchor when href is set, plain
+   span otherwise.
+   ============================================ */
+
+.ds-source-chip {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100); /* 4px */
+
+  /* Spacing */
+  padding: var(--padding-050) var(--padding-200); /* 2px 8px */
+
+  /* Shape — borderless pill on the secondary container */
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-secondary);
+
+  /* Typography */
+  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-secondary);
+
+  /* The pill shape is the affordance — never an underline */
+  text-decoration: none;
+  cursor: default;
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* ============================================
+   INDEX — citation numeral in its own circle
+   ============================================ */
+
+.ds-source-chip__index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--icon-size-500);
+  height: var(--icon-size-500);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-tertiary);
+
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   ICON (leading, when no index)
+   ============================================ */
+
+.ds-source-chip__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   TITLE — truncates with an ellipsis
+   ============================================ */
+
+.ds-source-chip__title {
+  max-width: 24ch;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ============================================
+   LINK (rendered as <a>)
+   ============================================ */
+
+.ds-source-chip--link {
+  cursor: pointer;
+}
+
+.ds-source-chip--link:hover {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-source-chip--link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-source-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/SourceChip/SourceChip.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by SourceChip itself — everything else falls through to the root element. */
+type SourceChipOwnProps = {
+    /** The source name, e.g. "Design tokens quarterly". Truncates with an ellipsis when long. */
+    title: string;
+    /** Citation number, rendered as a leading numeral in its own small badge circle. */
+    index?: number;
+    /**
+     * Leading icon — a Material Symbol name (string) or custom element (ReactNode).
+     * The icon and the index share the leading slot: when both are passed, `index` wins
+     * and the icon is not rendered.
+     */
+    icon?: string | React.ReactNode;
+    /** Optional href — renders as an `<a>` instead of a `<span>`. */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceChipProps extends SourceChipOwnProps, Omit<React.ComponentPropsWithoutRef<'a'>, keyof SourceChipOwnProps> {
+}
+/**
+ * SourceChip is the numbered citation pill linking a claim to its source.
+ * It renders inline after a sentence or in a sources row under an assistant
+ * chat message: a leading citation number (or icon) beside a truncating
+ * source title.
+ *
+ * Renders an `<a>` when `href` is supplied, a plain `<span>` otherwise.
+ * Forwards a ref to whichever element it renders, and spreads unrecognised
+ * props onto it — `target` and `rel` pass through as native anchor attributes.
+ */
+export declare const SourceChip: React.ForwardRefExoticComponent<SourceChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+export {};

package/components/SourceChip/SourceChip.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./SourceChip.css";
+import "../../fonts/material-symbols.css";
+const SourceChip = React.forwardRef(
+  ({ title, index, icon, href, className = "", ...rest }, ref) => {
+    const baseClass = "ds-source-chip";
+    const classes = [baseClass, href ? `${baseClass}--link` : "", className].filter(Boolean).join(" ");
+    const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: index }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx("a", { ...rest, ref, className: classes, href, children: content });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        children: content
+      }
+    );
+  }
+);
+SourceChip.displayName = "SourceChip";
+export {
+  SourceChip
+};