rift-ds 1.0.0

package/components/TagInput/TagInput.css

@@ -0,0 +1,169 @@
+/* ============================================
+   TAG INPUT COMPONENT
+   Multi-value text input; committed entries
+   held as removable tags inside the field
+   ============================================ */
+
+.ds-taginput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   SHELL — the focus-within box matching
+   Input's field border and radius
+   ============================================ */
+
+.ds-taginput__shell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gap-100); /* 4px */
+  padding: var(--padding-150) var(--padding-400); /* 6px 16px */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-input-bg-primary);
+  cursor: text;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-taginput__shell:hover:not(:focus-within) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-taginput__shell:focus-within {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   TAG — pill holding one committed entry
+   ============================================ */
+
+.ds-taginput__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050); /* 2px */
+  padding: var(--padding-050) var(--padding-200); /* 2px 8px */
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-secondary);
+  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);
+  max-width: 100%;
+}
+
+.ds-taginput__tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================
+   REMOVE — trailing close button on each tag
+   ============================================ */
+
+.ds-taginput__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-taginput__remove:not(:disabled):hover {
+  color: var(--color-text-primary);
+}
+
+.ds-taginput__remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 1px;
+}
+
+.ds-taginput__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+}
+
+/* ============================================
+   INPUT — borderless draft field sharing the
+   shell's line with the tags
+   ============================================ */
+
+.ds-taginput__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  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-input-text-primary);
+}
+
+.ds-taginput__input::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-taginput--error .ds-taginput__shell,
+.ds-taginput--error .ds-taginput__shell:hover:not(:focus-within),
+.ds-taginput--error .ds-taginput__shell:focus-within {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-taginput--disabled .ds-taginput__shell {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-taginput--disabled .ds-taginput__input,
+.ds-taginput--disabled .ds-taginput__remove {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-taginput--compact .ds-taginput__shell {
+  gap: var(--gap-050); /* 2px */
+  padding: var(--padding-100) var(--padding-300); /* 4px 12px */
+}
+
+.ds-taginput--compact .ds-taginput__input {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+/* 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-taginput .material-symbols-rounded {
+  color: inherit;
+}

package/components/TagInput/TagInput.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/**
+ * Props owned by TagInput itself — everything else falls through to the inner
+ * <input>. The native `value`/`defaultValue` are excluded from the interface:
+ * the draft text is component-managed, and the committed entries live in
+ * `values`/`defaultValues` instead.
+ */
+type TagInputOwnProps = {
+    /** Field label text */
+    label?: string;
+    /** Committed tags (controlled) — pair with `onValuesChange` */
+    values?: string[];
+    /** Initial tags when uncontrolled */
+    defaultValues?: string[];
+    /**
+     * Convenience callback receiving the full tag array whenever a tag is added
+     * or removed. The native `onChange` still fires for draft-text edits, which
+     * keeps the standard React event signature for form libraries.
+     */
+    onValuesChange?: (values: string[]) => void;
+    /** Maximum number of tags — at the limit the input stops accepting new ones */
+    maxTags?: number;
+    /** 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 control */
+    helperText?: string;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
+    className?: string;
+};
+export interface TagInputProps extends TagInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof TagInputOwnProps | 'type' | 'value' | 'defaultValue'> {
+}
+/**
+ * Multi-value text input holding committed entries as removable tags.
+ *
+ * Enter or comma commits the trimmed draft as a tag (duplicates and empty
+ * drafts are ignored), Backspace on an empty draft removes the last tag, and
+ * each tag carries its own labelled remove button. Forwards a ref to the inner
+ * `<input>` and spreads unrecognised props onto it.
+ */
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/TagInput/TagInput.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import { Field } from "../Field/Field.js";
+import "./TagInput.css";
+import "../../fonts/material-symbols.css";
+const TagInput = React.forwardRef(
+  ({
+    label,
+    values,
+    defaultValues,
+    onValuesChange,
+    maxTags,
+    size = "default",
+    error = false,
+    helperText,
+    className = "",
+    placeholder = "",
+    disabled = false,
+    required = false,
+    onChange,
+    onKeyDown,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-taginput";
+    const isControlled = values !== void 0;
+    const [internalValues, setInternalValues] = useState(defaultValues ?? []);
+    const [draft, setDraft] = useState("");
+    const inputRef = useRef(null);
+    const tags = isControlled ? values : internalValues;
+    const atLimit = maxTags !== void 0 && tags.length >= maxTags;
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const setRef = (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const updateValues = (next) => {
+      if (!isControlled) setInternalValues(next);
+      onValuesChange?.(next);
+    };
+    const commitDraft = () => {
+      const tag = draft.trim();
+      if (!tag || atLimit) return;
+      if (!tags.includes(tag)) updateValues([...tags, tag]);
+      setDraft("");
+    };
+    const removeTag = (index) => {
+      if (disabled) return;
+      updateValues(tags.filter((_, i) => i !== index));
+    };
+    const handleChange = (e) => {
+      onChange?.(e);
+      setDraft(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "Enter" && draft.trim() !== "") {
+        e.preventDefault();
+        commitDraft();
+      } else if (e.key === ",") {
+        e.preventDefault();
+        commitDraft();
+      } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+        removeTag(tags.length - 1);
+      }
+    };
+    const handleShellClick = (e) => {
+      if (disabled) return;
+      if (e.target.closest(`.${baseClass}__remove`)) return;
+      inputRef.current?.focus();
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const describedBy = helperText ? `${inputId}-helper` : rest["aria-describedby"];
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__shell`, onClick: handleShellClick, children: [
+          tags.map((tag, index) => /* @__PURE__ */ jsxs("span", { className: `${baseClass}__tag`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__tag-label`, children: tag }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__remove`,
+                onClick: () => removeTag(index),
+                disabled,
+                "aria-label": `Remove ${tag}`,
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+              }
+            )
+          ] }, tag)),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref: setRef,
+              className: `${baseClass}__input`,
+              type: "text",
+              id: inputId,
+              name,
+              value: draft,
+              placeholder: atLimit ? "" : placeholder,
+              disabled,
+              required,
+              "aria-invalid": error,
+              "aria-describedby": describedBy,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+TagInput.displayName = "TagInput";
+export {
+  TagInput
+};

package/components/Textarea/Textarea.css

@@ -0,0 +1,109 @@
+/* ============================================
+   TEXTAREA COMPONENT
+   Multi-line text input with label and counter
+   ============================================ */
+
+.ds-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-textarea__field {
+  width: 100%;
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-input-bg-primary);
+
+  /* Typography */
+  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-input-text-primary);
+
+  /* Transitions */
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.ds-textarea__field::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+.ds-textarea__field:hover:not(:focus):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-textarea__field:focus {
+  border-color: var(--color-input-border-selected);
+  background-color: var(--color-input-bg-primary);
+}
+
+/* ============================================
+   FOOTER (helper + counter)
+   ============================================ */
+
+.ds-textarea__counter {
+  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);
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-textarea--error .ds-textarea__field {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-textarea--error .ds-textarea__field:focus {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-textarea--error .ds-textarea__counter {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-textarea--disabled .ds-textarea__field {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  color: var(--color-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.ds-textarea--disabled .ds-textarea__field::placeholder {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-textarea--compact .ds-textarea__field {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/** Props owned by Textarea itself — everything else falls through to the <textarea>. */
+type TextareaOwnProps = {
+    /** Textarea label text */
+    label?: string;
+    /** Current value */
+    value?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below */
+    helperText?: string;
+    /** Whether the textarea is resizable */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Max character count — shows counter when set */
+    maxLength?: number;
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <textarea> */
+    className?: string;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+};
+export interface TextareaProps extends TextareaOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof TextareaOwnProps> {
+}
+/**
+ * Multi-line text input with optional label, helper text, character counter
+ * and error state.
+ *
+ * Forwards a ref to the underlying `<textarea>` and spreads unrecognised props
+ * onto it.
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/Textarea/Textarea.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Field } from "../Field/Field.js";
+import "./Textarea.css";
+const Textarea = React.forwardRef(
+  ({
+    label,
+    placeholder = "",
+    value = "",
+    rows = 4,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    resize = "vertical",
+    maxLength,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-textarea";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const charCount = value?.length || 0;
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        aside: maxLength ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__counter`, "aria-live": "polite", "aria-atomic": "true", children: [
+          charCount,
+          "/",
+          maxLength
+        ] }) : void 0,
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...rest,
+            ref,
+            className: `${baseClass}__field`,
+            id: inputId,
+            name,
+            value,
+            placeholder,
+            rows,
+            disabled,
+            required,
+            maxLength,
+            "aria-label": ariaLabel || rest["aria-label"] || label,
+            "aria-invalid": error,
+            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+            onChange: handleChange,
+            style: { resize, ...style }
+          }
+        )
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};