@robr0/design-system 0.7.0 → 0.9.0

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";

package/components/TimePicker/TimePicker.css

@@ -0,0 +1,230 @@
+/* ============================================
+   TIMEPICKER COMPONENT
+   Time-of-day field with a dropdown listbox of
+   generated times. Mirrors Dropdown's anatomy;
+   the trigger is a real <button> styled as an
+   input.
+   ============================================ */
+
+/* ============================================
+   BASE
+   ============================================ */
+
+.ds-timepicker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+  position: relative;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-timepicker__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px — input shape, not the button pill */
+  background-color: var(--color-input-bg-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+.ds-timepicker__trigger:hover:not(:focus-visible):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-timepicker__trigger:focus-visible {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-timepicker--open .ds-timepicker__trigger {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   CLOCK ICON
+   ============================================ */
+
+.ds-timepicker__icon {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   VALUE / PLACEHOLDER
+   ============================================ */
+
+.ds-timepicker__value {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-input-text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-timepicker__value--placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* ============================================
+   CHEVRON
+   ============================================ */
+
+.ds-timepicker__chevron {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+  flex-shrink: 0;
+}
+
+.ds-timepicker--open .ds-timepicker__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   MENU
+   ============================================ */
+
+.ds-timepicker__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--gap-xxs); /* 2px */
+  padding: var(--padding-xxs); /* inset gap on all sides */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  list-style: none;
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--shadow-floating);
+
+  /* Animation */
+  animation: ds-timepicker-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+@keyframes ds-timepicker-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   OPTION
+   ============================================ */
+
+.ds-timepicker__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-sm) var(--padding-sm-md); /* 8px 12px */
+  border-radius: var(--radius-sm);
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-timepicker__option:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-timepicker__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-timepicker__option--selected {
+  color: var(--color-action-primary-text-tertiary);
+}
+
+/* ============================================
+   CHECK ICON
+   ============================================ */
+
+.ds-timepicker__check {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-action-primary-bg);
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-timepicker--error .ds-timepicker__trigger {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-timepicker--disabled .ds-timepicker__trigger {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-timepicker--disabled .ds-timepicker__value {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-timepicker--disabled .ds-timepicker__icon,
+.ds-timepicker--disabled .ds-timepicker__chevron {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-timepicker--compact .ds-timepicker__trigger {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+}
+
+.ds-timepicker--compact .ds-timepicker__value {
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-timepicker--compact .ds-timepicker__chevron {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-timepicker--compact .ds-timepicker__option {
+  padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-timepicker--compact .ds-timepicker__check {
+  --icon-size: var(--icon-size-sm);
+}

package/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/** Props owned by TimePicker itself — everything else falls through to the trigger button. */
+type TimePickerOwnProps = {
+    /** Label text rendered above the trigger */
+    label?: string;
+    /** Placeholder shown when no time is selected */
+    placeholder?: string;
+    /** Currently selected time as a 24-hour "HH:MM" string (controlled) */
+    value?: string;
+    /** Initially selected time as a 24-hour "HH:MM" string (uncontrolled) */
+    defaultValue?: string;
+    /** Earliest generated option, as a 24-hour "HH:MM" string */
+    minTime?: string;
+    /** Latest generated option, as a 24-hour "HH:MM" string */
+    maxTime?: string;
+    /** Minutes between generated options */
+    stepMinutes?: number;
+    /** Display format for the trigger and options — the value stays a 24-hour "HH:MM" string either way */
+    hourFormat?: '12' | '24';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Helper or error message */
+    helperText?: string;
+    /** Called with the newly selected 24-hour "HH:MM" value */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface TimePickerProps extends TimePickerOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof TimePickerOwnProps | 'type'> {
+}
+/**
+ * Time-of-day form field. A button-shaped trigger opens a scrollable
+ * `role="listbox"` of times generated from `minTime`/`maxTime`/`stepMinutes`,
+ * with full keyboard navigation. The value is always a 24-hour "HH:MM"
+ * string; `hourFormat` only changes the display.
+ *
+ * Forwards a ref to the trigger button and spreads unrecognised props onto it.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};