rift-ds 1.0.0

package/components/Field/Field.css

@@ -0,0 +1,80 @@
+/* ============================================
+   FIELD COMPONENT
+   Label, required marker, and helper/error text
+   shared by every labelled form control.
+
+   Layout (flex column, gap) deliberately stays on the
+   consuming component's own root class — Field only
+   owns the label and helper scaffolding, so adopting it
+   changes no spacing.
+   ============================================ */
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-field__label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-field__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   FOOTER — only rendered when an `aside` is supplied
+   (a character counter, a unit). Without one the helper
+   sits directly in the field column, so adopting Field
+   adds no wrapper to existing markup.
+   ============================================ */
+
+.ds-field__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-200);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+.ds-field__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);
+  margin: 0;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-field--error .ds-field__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-field--disabled .ds-field__label {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   COMPACT SIZE
+   ============================================ */
+
+.ds-field--compact .ds-field__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}

package/components/Field/Field.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+/** Props owned by Field itself — everything else falls through to the wrapper. */
+type FieldOwnProps = {
+    /** Label text rendered above the control */
+    label?: string;
+    /** The form control this field labels */
+    children?: React.ReactNode;
+    /** Helper or error message rendered below the control */
+    helperText?: string;
+    /**
+     * Optional content rendered opposite the helper text — a character counter,
+     * a unit, a "0/280". Present only when supplied; without it the helper sits
+     * directly in the field's column and no extra wrapper is introduced.
+     */
+    aside?: React.ReactNode;
+    /** Error state — recolours the helper text and marks the control invalid */
+    error?: boolean;
+    /** Marks the field required and renders the required marker */
+    required?: boolean;
+    /** Whether the control is disabled — dims the label */
+    disabled?: boolean;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /**
+     * Group mode: renders the label as a `<span id>` instead of a
+     * `<label htmlFor>`, for scaffolding a set of controls (a checkbox or
+     * radio group) where no single labelable element exists — the group node
+     * points `aria-labelledby` at the span via `labelId`.
+     */
+    group?: boolean;
+    /**
+     * id for the control. Generated when omitted, so the label/control/helper
+     * association works with no configuration.
+     */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FieldProps extends FieldOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FieldOwnProps> {
+}
+/**
+ * Field owns the scaffolding shared by every labelled form control: the label
+ * and its `htmlFor`, the required marker, the helper/error message, the ids
+ * that tie them together, and the `aria-describedby` / `aria-invalid` wiring.
+ *
+ * Controls compose inside it and read the wiring through `useField()` rather
+ * than deriving ids themselves — which is what keeps accessibility correct
+ * systemically instead of one component at a time.
+ *
+ * ```tsx
+ * <Field label="Email" helperText="We never share it." required>
+ *   <MyControl />
+ * </Field>
+ * ```
+ */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Field/Field.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId } from "react";
+import { FieldContext } from "./FieldContext.js";
+import "./Field.css";
+const Field = React.forwardRef(
+  ({
+    label,
+    children,
+    helperText,
+    aside,
+    error = false,
+    required = false,
+    disabled = false,
+    size = "default",
+    group = false,
+    id,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-field";
+    const generatedId = useId();
+    const controlId = id || generatedId;
+    const describedBy = helperText ? `${controlId}-helper` : void 0;
+    const labelId = label ? `${controlId}-label` : void 0;
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const context = {
+      controlId,
+      labelId,
+      describedBy,
+      invalid: error,
+      required,
+      disabled
+    };
+    return /* @__PURE__ */ jsx(FieldContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      label && (group ? (
+        /* No labelable element to point htmlFor at — the group node
+           names itself with aria-labelledby={labelId} instead. */
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, id: labelId, children: [
+          label,
+          required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+            " ",
+            "*"
+          ] })
+        ] })
+      ) : /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, id: labelId, htmlFor: controlId, children: [
+        label,
+        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] })),
+      children,
+      aside ? /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+        helperText ? /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: describedBy, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
+        aside
+      ] }) : helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: describedBy, children: helperText })
+    ] }) });
+  }
+);
+Field.displayName = "Field";
+export {
+  Field
+};

package/components/Field/FieldContext.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+/**
+ * Everything a labelled form control needs to be announced correctly.
+ * Derived once by `Field`; read by a control via `useField()`.
+ *
+ * Lives in its own module so `Field.tsx` exports only a component — the
+ * react-refresh lint rule that keeps Fast Refresh working.
+ */
+export interface FieldContextValue {
+    /** id for the control itself — the label's `htmlFor` points at it */
+    controlId: string;
+    /**
+     * id of the rendered `<label>`, or undefined when there is no label.
+     *
+     * `htmlFor` only associates with *labelable* elements (input, select,
+     * textarea, button…). A composite widget built from a `div` — a
+     * `role="combobox"` trigger, for instance — is not labelable, so it must
+     * point `aria-labelledby` at this id instead.
+     */
+    labelId: string | undefined;
+    /** id of the helper/error text, or undefined when there is none */
+    describedBy: string | undefined;
+    /** whether the control should report itself invalid */
+    invalid: boolean;
+    /** whether the control is required */
+    required: boolean;
+    /** whether the control is disabled */
+    disabled: boolean;
+}
+export declare const FieldContext: React.Context<FieldContextValue | null>;
+/**
+ * Read the wiring `Field` derived.
+ *
+ * Returns `null` outside a `Field`, so a control that uses it still renders
+ * standalone — always optional-chain the result.
+ *
+ * ```tsx
+ * const field = useField();
+ * <input id={field?.controlId} aria-describedby={field?.describedBy} />
+ * ```
+ */
+export declare const useField: () => FieldContextValue | null;

package/components/Field/FieldContext.js

@@ -0,0 +1,8 @@
+"use client";
+import React from "react";
+const FieldContext = React.createContext(null);
+const useField = () => React.useContext(FieldContext);
+export {
+  FieldContext,
+  useField
+};

package/components/Figure/Figure.css

@@ -0,0 +1,71 @@
+/* ============================================
+   FIGURE COMPONENT
+   Image + caption in a rounded container.
+   Pass onClick for a zoomable (lightbox) figure.
+   ============================================ */
+
+.ds-figure {
+  margin: 0;
+  border-radius: var(--radius-300);
+  overflow: hidden;
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   MEDIA — child img/picture fills the width
+   ============================================ */
+
+.ds-figure__media {
+  display: block;
+  line-height: 0;
+}
+
+.ds-figure__media img {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   CAPTION
+   ============================================ */
+
+.ds-figure__caption {
+  display: block;
+  padding: var(--padding-400) var(--padding-500);
+  border-top: var(--border-025) solid var(--color-bg-container-border);
+  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);
+}
+
+/* ============================================
+   ZOOMABLE (has onClick)
+   ============================================ */
+
+/* The zoom control is a real <button> wrapping the media (ARIA forbids
+   role="button" on <figure>), stripped back to a bare block. */
+.ds-figure__zoom {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: zoom-in;
+}
+
+.ds-figure__zoom:hover .ds-figure__media img {
+  opacity: 0.88;
+}
+
+/* Inset ring: the button sits inside the figure's overflow clip, so an
+   outset outline would be cropped away. */
+.ds-figure__zoom:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}

package/components/Figure/Figure.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface FigureProps {
+    /** The image element — a plain <img> or a framework image component */
+    children: React.ReactNode;
+    /** Caption rendered below the image */
+    caption?: React.ReactNode;
+    /** Click handler (e.g. open a lightbox) — adds zoom affordance + keyboard support */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Figure component — an image with an optional caption in a bordered,
+ * rounded container. Pass onClick to make it zoomable (adds the
+ * zoom cursor, hover dim, and keyboard activation).
+ */
+export declare const Figure: ({ children, caption, onClick, className, }: FigureProps) => React.JSX.Element;

package/components/Figure/Figure.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Figure.css";
+const Figure = ({
+  children,
+  caption,
+  onClick,
+  className = ""
+}) => {
+  const baseClass = "ds-figure";
+  const classes = [baseClass, onClick && `${baseClass}--zoomable`, className].filter(Boolean).join(" ");
+  const media = /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children });
+  return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
+    onClick ? (
+      // A real button rather than role="button" on the figure: ARIA
+      // forbids the button role on <figure>, and the element brings
+      // Enter/Space activation itself. Its accessible name is the
+      // child image's alt text.
+      /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__zoom`, onClick, children: media })
+    ) : media,
+    caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
+  ] });
+};
+export {
+  Figure
+};

package/components/FileInput/FileInput.css

@@ -0,0 +1,281 @@
+/* ============================================
+   FILE INPUT COMPONENT
+   Click-or-drop zone plus a controlled file list
+   ============================================ */
+
+.ds-file-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+/* ============================================
+   DROPZONE
+   ============================================ */
+
+.ds-file-input__dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--gap-100); /* 4px */
+  padding: var(--padding-1000); /* 32px */
+  border: var(--border-025) dashed var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-input-bg-primary);
+  cursor: pointer;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-file-input__dropzone:hover {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-file-input__dropzone:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-file-input--dragging .ds-file-input__dropzone {
+  border-color: var(--color-input-border-selected);
+  background-color: var(--color-bg-container-primary);
+}
+
+.ds-file-input__dropzone-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+}
+
+.ds-file-input__dropzone-text {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-file-input__dropzone-hint {
+  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);
+}
+
+/* The real input stays in the DOM for form semantics but is never shown */
+.ds-file-input__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   FILE LIST
+   ============================================ */
+
+.ds-file-input__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100); /* 4px */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ds-file-input__file {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  padding: var(--padding-200) var(--padding-300); /* 8px 12px */
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-bg-page-primary);
+}
+
+.ds-file-input__file--error {
+  border-color: var(--color-status-error-border);
+  background-color: var(--color-status-error-bg);
+}
+
+.ds-file-input__file-icon {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-file-input__file--error .ds-file-input__file-icon {
+  color: var(--color-status-error-border);
+}
+
+.ds-file-input__file-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-file-input__file-name {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-file-input__file-size {
+  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-file-input__file-error {
+  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-status-error-text);
+}
+
+/* ============================================
+   PER-FILE PROGRESS
+   ============================================ */
+
+.ds-file-input__progress {
+  display: block;
+  width: 100%;
+  height: 4px;
+  margin-top: var(--gap-050);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+}
+
+.ds-file-input__progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-action-primary-bg);
+  transition: width var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   REMOVE BUTTON
+   ============================================ */
+
+.ds-file-input__file-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-file-input__file-remove:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-file-input__file-remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-file-input__file-remove:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-file-input__file-remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-file-input--error .ds-file-input__dropzone {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-file-input--disabled .ds-file-input__dropzone {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  cursor: not-allowed;
+}
+
+.ds-file-input--disabled .ds-file-input__dropzone-text,
+.ds-file-input--disabled .ds-file-input__dropzone-hint,
+.ds-file-input--disabled .ds-file-input__dropzone-icon {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-file-input--compact .ds-file-input__dropzone {
+  padding: var(--padding-500); /* 20px */
+}
+
+.ds-file-input--compact .ds-file-input__dropzone-icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-file-input--compact .ds-file-input__dropzone-text,
+.ds-file-input--compact .ds-file-input__file-name {
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+.ds-file-input--compact .ds-file-input__file {
+  padding: var(--padding-150) var(--padding-200); /* 6px 8px */
+}
+
+/* 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-file-input .material-symbols-rounded {
+  color: inherit;
+}