rift-ds 1.0.0

package/components/FileInput/FileInput.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+export interface FileInputFile {
+    /** Stable identifier */
+    id: string;
+    /** File name shown in the list */
+    name: string;
+    /** Size in bytes — rendered human-readable */
+    size?: number;
+    /** Upload progress 0–100. Omit for files that are already stored. */
+    progress?: number;
+    /** Per-file error message — replaces the size line */
+    error?: string;
+}
+/** Props owned by FileInput itself — everything else falls through to the native <input type="file">. */
+type FileInputOwnProps = {
+    /** Field label above the dropzone */
+    label?: string;
+    /** Instructional copy inside the dropzone */
+    placeholder?: string;
+    /** Files to list under the dropzone */
+    files?: FileInputFile[];
+    /** Component size (not the native character-width `size` attribute) */
+    size?: 'default' | 'compact';
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below the field */
+    helperText?: string;
+    /** Called with the newly selected files */
+    onFilesSelected?: (files: File[]) => void;
+    /** Called with the id of a file whose remove button was pressed */
+    onFileRemove?: (id: string) => 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 FileInputProps extends FileInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof FileInputOwnProps | 'type'> {
+}
+/**
+ * FileInput component — a click-or-drop zone paired with a list of the
+ * chosen files. The list is fully controlled: pass `files` and handle
+ * `onFilesSelected` / `onFileRemove` so upload progress and per-file
+ * errors stay owned by the host app.
+ *
+ * Forwards a ref to the underlying `<input type="file">` — useful for
+ * programmatically opening the picker or clearing the selection — and spreads
+ * unrecognised props onto it.
+ */
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/FileInput/FileInput.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useId } from "react";
+import { Field } from "../Field/Field.js";
+import "./FileInput.css";
+import "../../fonts/material-symbols.css";
+const formatBytes = (bytes) => {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, exponent);
+  return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
+};
+const FileInput = React.forwardRef(
+  ({
+    label,
+    placeholder = "Drag and drop, or click to browse",
+    accept,
+    multiple = false,
+    files = [],
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onFilesSelected,
+    onFileRemove,
+    onChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const inputId = id || name || generatedId;
+    const baseClass = "ds-file-input";
+    const setInputRef = (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const emitFiles = (fileList) => {
+      if (!fileList || fileList.length === 0) return;
+      onFilesSelected?.(Array.from(fileList));
+    };
+    const handleChange = (e) => {
+      onChange?.(e);
+      emitFiles(e.target.files);
+      e.target.value = "";
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      if (disabled) return;
+      emitFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (!disabled) setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+      if (e.currentTarget.contains(e.relatedTarget)) return;
+      setIsDragging(false);
+    };
+    const openPicker = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        openPicker();
+      }
+    };
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      isDragging ? `${baseClass}--dragging` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${baseClass}__dropzone`,
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": ariaLabel || rest["aria-label"] || placeholder,
+              "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+              "aria-invalid": error || void 0,
+              "aria-disabled": disabled || void 0,
+              onClick: openPicker,
+              onKeyDown: handleKeyDown,
+              onDrop: handleDrop,
+              onDragOver: handleDragOver,
+              onDragLeave: handleDragLeave,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__dropzone-icon material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "upload_file"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-text`, children: placeholder }),
+                accept && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dropzone-hint`, children: [
+                  "Accepts ",
+                  accept
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref: setInputRef,
+              id: inputId,
+              name,
+              type: "file",
+              className: `${baseClass}__native`,
+              accept,
+              multiple,
+              disabled,
+              required,
+              tabIndex: -1,
+              "aria-label": label ? void 0 : ariaLabel || rest["aria-label"] || placeholder,
+              onChange: handleChange
+            }
+          ),
+          files.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: files.map((file) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: [`${baseClass}__file`, file.error ? `${baseClass}__file--error` : ""].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__file-icon material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: file.error ? "error" : "description"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: `${baseClass}__file-details`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-name`, children: file.name }),
+                  file.error ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-error`, children: file.error }) : file.size !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-size`, children: formatBytes(file.size) }),
+                  file.error === void 0 && file.progress !== void 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__progress`,
+                      role: "progressbar",
+                      "aria-valuenow": file.progress,
+                      "aria-valuemin": 0,
+                      "aria-valuemax": 100,
+                      "aria-label": `Uploading ${file.name}`,
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__progress-fill`,
+                          style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                onFileRemove && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__file-remove`,
+                    onClick: () => onFileRemove(file.id),
+                    disabled,
+                    "aria-label": `Remove ${file.name}`,
+                    children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                  }
+                )
+              ]
+            },
+            file.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+FileInput.displayName = "FileInput";
+export {
+  FileInput
+};

package/components/FilterBar/FilterBar.css

@@ -0,0 +1,202 @@
+/* ============================================
+   FILTER BAR COMPONENT
+   A row of filter chips, each opening a
+   popover listbox. The chips share Chip's pill
+   language; active state uses the teal fill
+   convention from Chip's selected state.
+   ============================================ */
+
+/* Base */
+
+.ds-filter-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-200);
+}
+
+.ds-filter-bar__filter {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Chip shell — the pill holding the trigger and the clear button */
+
+.ds-filter-bar__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-200);
+  padding: var(--padding-150) var(--padding-300);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-page-primary);
+  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-secondary);
+  white-space: nowrap;
+  transition:
+    background-color var(--motion-duration-base) var(--motion-ease-standard),
+    border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar--compact .ds-filter-bar__chip {
+  gap: var(--gap-100);
+  padding: var(--padding-050) var(--padding-200);
+}
+
+.ds-filter-bar__chip:hover:not(.ds-filter-bar__chip--active) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-filter-bar__chip--open:not(.ds-filter-bar__chip--active) {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* Active — teal fill, matching Chip's selected convention */
+
+.ds-filter-bar__chip--active {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-filter-bar__chip--active:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* Trigger + clear share the shell's typography and colour */
+
+.ds-filter-bar__trigger,
+.ds-filter-bar__chip-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.ds-filter-bar__trigger:focus-visible,
+.ds-filter-bar__chip-clear:focus-visible,
+.ds-filter-bar__clear-all:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: var(--gap-050);
+  border-radius: var(--radius-pill);
+}
+
+.ds-filter-bar__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+}
+
+.ds-filter-bar__caret {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__chip--open .ds-filter-bar__caret {
+  transform: rotate(180deg);
+}
+
+.ds-filter-bar__chip-clear {
+  flex-shrink: 0;
+  border-radius: var(--radius-pill);
+}
+
+.ds-filter-bar__chip-clear .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+}
+
+/* Popover listbox */
+
+.ds-filter-bar__panel {
+  position: absolute;
+  top: calc(100% + var(--gap-050));
+  left: 0;
+  z-index: 10;
+  min-width: 100%;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--padding-100);
+  list-style: none;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-container-primary);
+  box-shadow: var(--shadow-floating);
+}
+
+.ds-filter-bar__option {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  padding: var(--padding-150) var(--padding-200);
+  border-radius: var(--radius-200);
+  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-primary);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__option:hover,
+.ds-filter-bar__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-filter-bar__option--selected {
+  color: var(--color-text-primary);
+}
+
+.ds-filter-bar__option-check {
+  flex-shrink: 0;
+  width: var(--icon-size-500);
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-action-primary-bg);
+}
+
+/* Clear all */
+
+.ds-filter-bar__clear-all {
+  margin: 0;
+  padding: var(--padding-150) var(--padding-200);
+  border: none;
+  background: none;
+  border-radius: var(--radius-pill);
+  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-secondary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__clear-all:hover {
+  color: var(--color-text-primary);
+}
+
+/* Icons take the colour of the text around them (see Chip.css for why
+   this is explicit rather than inherited). */
+.ds-filter-bar .material-symbols-rounded {
+  color: inherit;
+}

package/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** One choice inside a filter's popover. */
+export interface FilterBarOption {
+    /** Stored value, reported through `onValuesChange`. */
+    value: string;
+    /** Display label. */
+    label: string;
+}
+/** One filter: a chip on the bar with a popover of options behind it. */
+export interface FilterBarFilter {
+    /** Stable key for this filter — the key under which its values are reported. */
+    id: string;
+    /** Chip label, e.g. "Status". */
+    label: string;
+    /** Icon shown before the label — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** The choices this filter offers. */
+    options: FilterBarOption[];
+    /** Whether several options can be active at once. Single-select closes on choice. */
+    multiple?: boolean;
+}
+/** Props owned by FilterBar itself — everything else falls through to the root div. */
+type FilterBarOwnProps = {
+    /** The filters on the bar, in display order. */
+    filters: FilterBarFilter[];
+    /** Active options per filter id (controlled). Pair with `onValuesChange`. */
+    values?: Record<string, string[]>;
+    /** Active options per filter id (uncontrolled initial state). */
+    defaultValues?: Record<string, string[]>;
+    /**
+     * Fires with the full active-filter map on every change. Filters with
+     * nothing active are absent from the map, so an empty object means
+     * unfiltered.
+     */
+    onValuesChange?: (values: Record<string, string[]>) => void;
+    /** Label for the button that clears every filter at once. */
+    clearLabel?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FilterBarProps extends FilterBarOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FilterBarOwnProps | 'children'> {
+}
+/**
+ * FilterBar — a row of filter chips for narrowing a collection: each chip
+ * opens a popover of options, active filters show their choice and grow a
+ * clear button, and a clear-all appears once anything is active. State is one
+ * map of filter id to active values, controlled or uncontrolled, so wiring it
+ * to a DataTable is a single callback. Popovers are real listboxes: arrow
+ * keys move, Enter and Space toggle, Escape closes, focus never leaves the
+ * chip.
+ */
+export declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};