@robr0/design-system 0.8.0 → 0.9.0

package/components/Stepper/Stepper.css

@@ -0,0 +1,207 @@
+/* ============================================
+   STEPPER COMPONENT
+   Step-by-step progress indicator for wizards
+   and multi-stage flows
+   ============================================ */
+
+/* Base */
+
+.ds-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.ds-stepper__step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+/* Shared inner layout — a <button> when the step is clickable,
+   a <span> otherwise */
+.ds-stepper__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  text-align: center;
+  color: inherit;
+  min-width: 0;
+}
+
+button.ds-stepper__content {
+  cursor: pointer;
+}
+
+button.ds-stepper__content:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   INDICATOR
+   32px circle — check for complete, number
+   for active and upcoming
+   ============================================ */
+
+.ds-stepper__indicator {
+  --icon-size: var(--icon-size-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: var(--border-xs) solid transparent;
+  border-radius: var(--radius-full);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  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);
+}
+
+/* States */
+
+.ds-stepper__step--complete .ds-stepper__indicator {
+  border-color: var(--color-action-primary-border-secondary);
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-stepper__step--active .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__indicator {
+  border-color: var(--color-bg-container-border);
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-stepper__step--active button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   LABEL + DESCRIPTION
+   ============================================ */
+
+.ds-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  min-width: 0;
+}
+
+.ds-stepper__label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--active .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__label {
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__description {
+  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);
+}
+
+/* ============================================
+   CONNECTOR
+   Drawn between an indicator and the next;
+   turns action-coloured behind completed steps
+   ============================================ */
+
+.ds-stepper__connector {
+  position: absolute;
+  top: 16px; /* vertical centre of the 32px indicator */
+  left: calc(50% + 24px);
+  right: calc(-50% + 24px);
+  height: var(--border-md);
+  transform: translateY(-50%);
+  background-color: var(--color-divider);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--complete .ds-stepper__connector {
+  background-color: var(--color-action-primary-border-secondary);
+}
+
+/* ============================================
+   VERTICAL
+   ============================================ */
+
+.ds-stepper--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ds-stepper--vertical .ds-stepper__step {
+  flex: none;
+  justify-content: flex-start;
+  padding-bottom: var(--gap-lg); /* 20px */
+}
+
+.ds-stepper--vertical .ds-stepper__step:last-child {
+  padding-bottom: 0;
+}
+
+.ds-stepper--vertical .ds-stepper__content {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--gap-sm-md); /* 12px */
+  text-align: left;
+}
+
+/* Centre the first label line on the 32px indicator */
+.ds-stepper--vertical .ds-stepper__text {
+  padding-top: calc((32px - var(--font-paragraph-sm-em-line-height)) / 2);
+}
+
+.ds-stepper--vertical .ds-stepper__connector {
+  top: calc(32px + var(--gap-xs));
+  bottom: var(--gap-xs);
+  left: 16px; /* horizontal centre of the 32px indicator */
+  right: auto;
+  width: var(--border-md);
+  height: auto;
+  transform: translateX(-50%);
+}

package/components/Stepper/Stepper.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** A single step in a Stepper flow. */
+export type StepperStep = {
+    /** Step label shown beside or below the indicator */
+    label: string;
+    /** Optional supporting line rendered under the label */
+    description?: string;
+};
+/** Props owned by Stepper itself — everything else falls through to the `<ol>`. */
+type StepperOwnProps = {
+    /** Ordered list of steps in the flow */
+    steps: StepperStep[];
+    /**
+     * Index of the active step. Steps before it render as complete (check
+     * icon), steps after it as upcoming (step number). Pass `steps.length`
+     * to mark the whole flow complete.
+     */
+    activeStep: number;
+    /**
+     * Callback with the clicked step's index. When provided, completed steps
+     * and the active step become buttons so the reader can revisit an earlier
+     * stage; upcoming steps stay non-interactive either way.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface StepperProps extends StepperOwnProps, Omit<React.ComponentPropsWithoutRef<'ol'>, keyof StepperOwnProps> {
+}
+/**
+ * Stepper component — step-by-step progress indicator for wizards and
+ * multi-stage flows. Renders an ordered list of steps with CSS-drawn
+ * connectors: completed steps show a check, the active step carries
+ * `aria-current="step"`, and upcoming steps show their number.
+ *
+ * Forwards a ref to the `<ol>` and spreads unrecognised props onto it.
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
+export {};

package/components/Stepper/Stepper.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./Stepper.css";
+import "../../fonts/material-symbols.css";
+const Stepper = React.forwardRef(
+  ({
+    steps,
+    activeStep,
+    onStepClick,
+    orientation = "horizontal",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-stepper";
+    const classes = [
+      baseClass,
+      orientation === "vertical" && `${baseClass}--vertical`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("ol", { ...rest, ref, className: classes, children: steps.map((step, index) => {
+      const status = index < activeStep ? "complete" : index === activeStep ? "active" : "upcoming";
+      const interactive = Boolean(onStepClick) && status !== "upcoming";
+      const indicator = /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "check" }) : index + 1 });
+      const text = /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: step.label }),
+        step.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: step.description })
+      ] });
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `${baseClass}__step ${baseClass}__step--${status}`,
+          "aria-current": status === "active" ? "step" : void 0,
+          children: [
+            interactive ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__content`,
+                onClick: () => onStepClick?.(index),
+                children: [
+                  indicator,
+                  text
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: `${baseClass}__content`, children: [
+              indicator,
+              text
+            ] }),
+            index < steps.length - 1 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__connector`, "aria-hidden": "true" })
+          ]
+        },
+        index
+      );
+    }) });
+  }
+);
+Stepper.displayName = "Stepper";
+export {
+  Stepper
+};

package/components/Tabs/Tabs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import "./Tabs.css";

package/components/TagInput/TagInput.css

@@ -0,0 +1,160 @@
+/* ============================================
+   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-sm); /* 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-xs); /* 4px */
+  padding: var(--padding-xs) var(--padding-md); /* 6px 16px */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 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-xxs); /* 2px */
+  padding: var(--padding-xxxs) var(--padding-sm); /* 2px 8px */
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-secondary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-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-full);
+  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-sm);
+  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-xxs); /* 2px */
+  padding: var(--padding-xxs) var(--padding-sm-md); /* 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);
+}

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.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Field } from "../Field/Field.js";