@robr0/design-system 0.1.0

package/components/Textarea/Textarea.css

@@ -0,0 +1,152 @@
+/* ============================================
+   TEXTAREA COMPONENT
+   Multi-line text input with label and counter
+   ============================================ */
+
+.ds-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-textarea__label {
+  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-text-primary);
+}
+
+.ds-textarea__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-textarea__field {
+  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 */
+  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__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+}
+
+.ds-textarea__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;
+  flex: 1;
+}
+
+.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__helper {
+  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__label {
+  color: var(--color-input-text-disabled);
+}
+
+.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-xs) var(--padding-sm-md); /* 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);
+}
+
+.ds-textarea--compact .ds-textarea__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface TextareaProps {
+    /** Textarea label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value */
+    value?: string;
+    /** Number of visible rows */
+    rows?: number;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Whether the textarea is required */
+    required?: boolean;
+    /** 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;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Callback on focus */
+    onFocus?: () => void;
+    /** Callback on blur */
+    onBlur?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label override */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+export declare const Textarea: ({ label, placeholder, value, rows, size, disabled, required, error, helperText, resize, maxLength, onChange, onFocus, onBlur, className, ariaLabel, name, id, }: TextareaProps) => React.JSX.Element;

package/components/Textarea/Textarea.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Textarea.css";
+const Textarea = ({
+  label,
+  placeholder = "",
+  value = "",
+  rows = 4,
+  size = "default",
+  disabled = false,
+  required = false,
+  error = false,
+  helperText,
+  resize = "vertical",
+  maxLength,
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  ariaLabel,
+  name,
+  id
+}) => {
+  const baseClass = "ds-textarea";
+  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
+  const errorClass = error ? `${baseClass}--error` : "";
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const classes = [baseClass, sizeClass, errorClass, disabledClass, className].filter(Boolean).join(" ");
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+  const charCount = value?.length || 0;
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: `${baseClass}__field`,
+        id: inputId,
+        name,
+        value,
+        placeholder,
+        rows,
+        disabled,
+        required,
+        maxLength,
+        "aria-label": ariaLabel || label,
+        "aria-invalid": error,
+        "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        style: { resize }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText }),
+      maxLength && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__counter`, "aria-live": "polite", "aria-atomic": "true", children: [
+        charCount,
+        "/",
+        maxLength
+      ] })
+    ] })
+  ] });
+};
+export {
+  Textarea
+};

package/components/Timeline/Timeline.css

@@ -0,0 +1,339 @@
+/* ============================================
+   TIMELINE COMPONENT
+   Ordered steps/events with connected markers.
+   Vertical timeline or horizontal stepper.
+   ============================================ */
+
+.ds-timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.ds-timeline__item {
+  position: relative;
+  display: flex;
+}
+
+/* ============================================
+   MARKERS
+   Dot by default; badge (circle) when numbered;
+   bare floating icon when carrying an icon.
+   ============================================ */
+
+.ds-timeline__marker {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-timeline__marker--badge {
+  width: 28px;
+  height: 28px;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  color: var(--color-text-secondary);
+}
+
+/* Icon markers float bare — same 28px box as the badge
+   so connector geometry is shared, but no circle */
+.ds-timeline__marker--icon {
+  width: 28px;
+  height: 28px;
+  background-color: transparent;
+}
+
+.ds-timeline__marker-icon {
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-timeline__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+.ds-timeline__meta {
+  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-timeline__title {
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-timeline__description {
+  margin-top: var(--gap-sm);
+  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-text-primary);
+}
+
+/* ============================================
+   VERTICAL (default) — markers on the left,
+   connector line running down between them
+   ============================================ */
+
+.ds-timeline--vertical {
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-timeline--vertical .ds-timeline__item {
+  gap: var(--gap-md);
+  align-items: flex-start;
+}
+
+/* Align dot markers with the title's line box */
+.ds-timeline--vertical .ds-timeline__marker {
+  margin-top: 6px;
+}
+
+.ds-timeline--vertical .ds-timeline__marker--badge,
+.ds-timeline--vertical .ds-timeline__marker--icon {
+  margin-top: 0;
+}
+
+/* Connector line — from this marker down to the next item */
+.ds-timeline--vertical .ds-timeline__item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: calc(-1 * var(--gap-lg));
+  left: 5px; /* centre of the 12px dot */
+  width: var(--border-md);
+  background-color: var(--color-divider);
+}
+
+.ds-timeline--vertical.ds-timeline--numbered .ds-timeline__item::before,
+.ds-timeline--vertical .ds-timeline__item:has(.ds-timeline__marker--badge)::before,
+.ds-timeline--vertical .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  left: 13px; /* centre of the 28px badge/icon box */
+}
+
+/* Bare icons have no opaque fill to cover the line —
+   start it just below the icon box instead */
+.ds-timeline--vertical .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  top: 32px;
+}
+
+.ds-timeline--vertical .ds-timeline__item:last-child::before {
+  display: none;
+}
+
+/* ============================================
+   HORIZONTAL — stepper: markers on top,
+   connector line running across
+   ============================================ */
+
+.ds-timeline--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.ds-timeline--horizontal .ds-timeline__item {
+  flex: 1;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  min-width: 0;
+  padding-right: var(--padding-md);
+}
+
+/* Connector line — from this marker across to the next */
+.ds-timeline--horizontal .ds-timeline__item::before {
+  content: '';
+  position: absolute;
+  top: 5px; /* centre of the 12px dot */
+  left: 0;
+  right: 0;
+  height: var(--border-md);
+  background-color: var(--color-divider);
+}
+
+.ds-timeline--horizontal.ds-timeline--numbered .ds-timeline__item::before,
+.ds-timeline--horizontal .ds-timeline__item:has(.ds-timeline__marker--badge)::before,
+.ds-timeline--horizontal .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  top: 13px; /* centre of the 28px badge/icon box */
+}
+
+/* Bare icons have no opaque fill to cover the line —
+   start it just after the icon box instead */
+.ds-timeline--horizontal .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  left: 32px;
+}
+
+.ds-timeline--horizontal .ds-timeline__item:last-child::before {
+  display: none;
+}
+
+/* ============================================
+   COMPANY VARIANT — a logo marker per entry,
+   a company/tool name, and one or more nested
+   roles. A segmented bar runs down each entry
+   (résumé / pipeline histories).
+   ============================================ */
+
+/* 32px logo marker — bare, transparent box; the image keeps its own shape.
+   Reset the base marker's circular clip so logos are never cropped. */
+.ds-timeline__marker--logo {
+  width: 32px;
+  height: 32px;
+  background-color: transparent;
+  border-radius: 0;
+  overflow: visible;
+}
+
+/* Logos display in their natural aspect ratio, capped at the 32px box */
+.ds-timeline__marker--logo :where(img, svg) {
+  max-width: 32px;
+  max-height: 32px;
+  object-fit: contain;
+}
+
+/* Logo sits at the top of the entry, aligned with the company name */
+.ds-timeline--company .ds-timeline__marker--logo {
+  margin-top: 0;
+}
+
+.ds-timeline--company .ds-timeline__content {
+  gap: var(--gap-sm);
+}
+
+.ds-timeline__company-name {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+  /* centre the name against the 32px logo */
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}
+
+.ds-timeline__roles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-timeline__role {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.ds-timeline__role-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+}
+
+.ds-timeline__role-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-timeline__role-dates {
+  flex-shrink: 0;
+  white-space: nowrap;
+  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);
+  color: var(--color-text-tertiary);
+}
+
+.ds-timeline__present {
+  color: var(--color-status-positive-text);
+}
+
+.ds-timeline__role-description {
+  margin: 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-text-secondary);
+}
+
+.ds-timeline__role-bullets {
+  margin: 0;
+  padding-left: 20px;
+  list-style: disc;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.ds-timeline__role-bullets li {
+  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);
+  color: var(--color-text-secondary);
+}
+
+.ds-timeline__role-bullets a {
+  color: var(--color-action-primary-bg);
+  font-weight: var(--font-paragraph-em-weight);
+  text-decoration: none;
+}
+
+.ds-timeline__role-bullets a:hover {
+  text-decoration: underline;
+}
+
+/* Connector — centred under the 32px logo, with an even 8px break above and
+   below every logo: it starts 8px below this logo and runs down to 8px above
+   the next one (extending into the inter-entry gap). */
+.ds-timeline--company .ds-timeline__item::before {
+  left: 16px; /* centre of the 32px logo */
+  top: 40px; /* 32px logo + 8px break */
+  bottom: calc(8px - var(--gap-lg)); /* stop 8px above the next logo */
+}
+
+/* Last entry has no following logo — stop the bar at its own content */
+.ds-timeline--company .ds-timeline__item:last-child::before {
+  display: block;
+  bottom: 0;
+}

package/components/Timeline/Timeline.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+export interface TimelineItem {
+    /** Step or event title */
+    title: string;
+    /** Small line above the title, e.g. a date range or stage tag */
+    meta?: string;
+    /** Body content under the title */
+    description?: React.ReactNode;
+    /** Material Symbol shown in the marker (overrides dot/number) */
+    icon?: string;
+}
+/** A single role/position within a company entry (`company` variant). */
+export interface TimelineRole {
+    /** Role or position title */
+    title: string;
+    /** Start of the date range, e.g. "May 2024" (omit for entries with no dates) */
+    start?: string;
+    /** End of the date range, e.g. "Jan 2026" (ignored when `present` is set) */
+    end?: string;
+    /** Renders a green "Present" in place of `end` for current roles */
+    present?: boolean;
+    /** Optional summary paragraph under the role header */
+    description?: React.ReactNode;
+    /** Optional bullet points; each entry is rendered as an `<li>` */
+    bullets?: React.ReactNode[];
+}
+/** A company/tool entry grouping one or more roles under a logo (`company` variant). */
+export interface TimelineCompany {
+    /** Company or tool name shown beside the logo */
+    name: string;
+    /** Image node used as the marker (e.g. an `<img>` / framework image element) */
+    logo?: React.ReactNode;
+    /** One or more roles nested under this entry */
+    roles: TimelineRole[];
+}
+/** Default variant — a flat sequence of steps/events with dot, badge, or icon markers. */
+export interface TimelineDefaultProps {
+    variant?: 'default';
+    /** Ordered list of steps/events */
+    items: TimelineItem[];
+    /** `vertical` timeline (default) or `horizontal` stepper */
+    orientation?: 'vertical' | 'horizontal';
+    /** Number the markers 1..n instead of dots */
+    numbered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** Company variant — grouped roles under a logo, for résumé/pipeline histories. */
+export interface TimelineCompanyProps {
+    variant: 'company';
+    /** Ordered list of company/tool entries */
+    items: TimelineCompany[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export type TimelineProps = TimelineDefaultProps | TimelineCompanyProps;
+/**
+ * Timeline component — an ordered sequence of steps or events with
+ * connected markers. Vertical for histories and process narratives,
+ * horizontal for compact steppers. The `company` variant groups one or
+ * more roles under a logo marker for résumé/pipeline histories.
+ */
+export declare const Timeline: (props: TimelineProps) => React.JSX.Element;