@robr0/design-system 0.1.0

package/components/Input/Input.css

@@ -0,0 +1,193 @@
+/* ============================================
+   INPUT COMPONENT
+   Text input with label, icons, and helper text
+   ============================================ */
+
+.ds-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-input__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-input__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   FIELD WRAPPER
+   ============================================ */
+
+.ds-input__field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-input__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;
+}
+
+.ds-input__field::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+.ds-input__field:hover:not(:focus):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-input__field:focus {
+  border-color: var(--color-input-border-selected);
+  background-color: var(--color-input-bg-primary);
+}
+
+/* ============================================
+   ICONS
+   ============================================ */
+
+.ds-input__icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  pointer-events: none;
+}
+
+.ds-input__icon--left {
+  left: var(--padding-md); /* 16px */
+}
+
+.ds-input__icon--right {
+  right: var(--padding-md); /* 16px */
+}
+
+.ds-input--has-icon-left .ds-input__field {
+  padding-left: calc(var(--padding-md) + 24px + var(--gap-sm)); /* 16px + 24px icon + 8px gap */
+}
+
+.ds-input--has-icon-right .ds-input__field {
+  padding-right: calc(var(--padding-md) + 24px + var(--gap-sm)); /* 16px + 24px icon + 8px gap */
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+.ds-input__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;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-input--error .ds-input__field {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-input--error .ds-input__field:focus {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-input--error .ds-input__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-input--disabled .ds-input__label {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-input--disabled .ds-input__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-input--disabled .ds-input__field::placeholder {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-input--disabled .ds-input__icon {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-input--compact .ds-input__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-input--compact .ds-input__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-input--compact .ds-input__icon--left {
+  left: var(--padding-sm-md); /* 12px */
+}
+
+.ds-input--compact .ds-input__icon--right {
+  right: var(--padding-sm-md); /* 12px */
+}
+
+.ds-input--compact.ds-input--has-icon-left .ds-input__field {
+  padding-left: calc(var(--padding-sm-md) + 20px + var(--gap-sm)); /* 12px + 20px icon + 8px gap */
+}
+
+.ds-input--compact.ds-input--has-icon-right .ds-input__field {
+  padding-right: calc(var(--padding-sm-md) + 20px + var(--gap-sm)); /* 12px + 20px icon + 8px gap */
+}
+
+.ds-input--compact .ds-input__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}

package/components/Input/Input.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface InputProps {
+    /** Input label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value */
+    value?: string;
+    /** Input type */
+    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below the input */
+    helperText?: string;
+    /** Material Symbol icon name on the left */
+    iconLeft?: string;
+    /** Material Symbol icon name on the right */
+    iconRight?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Callback on focus */
+    onFocus?: () => void;
+    /** Callback on blur */
+    onBlur?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible name override */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+export declare const Input: ({ label, placeholder, value, type, size, disabled, required, error, helperText, iconLeft, iconRight, onChange, onFocus, onBlur, className, ariaLabel, name, id, }: InputProps) => React.JSX.Element;

package/components/Input/Input.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Input.css";
+import "../../fonts/material-symbols.css";
+const Input = ({
+  label,
+  placeholder = "",
+  value,
+  type = "text",
+  size = "default",
+  disabled = false,
+  required = false,
+  error = false,
+  helperText,
+  iconLeft,
+  iconRight,
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  ariaLabel,
+  name,
+  id
+}) => {
+  const baseClass = "ds-input";
+  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
+  const errorClass = error ? `${baseClass}--error` : "";
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const hasLeftIcon = iconLeft ? `${baseClass}--has-icon-left` : "";
+  const hasRightIcon = iconRight ? `${baseClass}--has-icon-right` : "";
+  const classes = [baseClass, sizeClass, errorClass, disabledClass, hasLeftIcon, hasRightIcon, className].filter(Boolean).join(" ");
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+  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__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
+      iconLeft && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon ${baseClass}__icon--left material-symbols-rounded`, "aria-hidden": "true", children: iconLeft }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: `${baseClass}__field`,
+          type,
+          id: inputId,
+          name,
+          value,
+          placeholder,
+          disabled,
+          required,
+          "aria-label": ariaLabel || label,
+          "aria-invalid": error,
+          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+          onChange: handleChange,
+          onFocus,
+          onBlur
+        }
+      ),
+      iconRight && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon ${baseClass}__icon--right material-symbols-rounded`, "aria-hidden": "true", children: iconRight })
+    ] }),
+    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+  ] });
+};
+export {
+  Input
+};

package/components/Instructions/Instructions.css

@@ -0,0 +1,216 @@
+/* ============================================
+   INSTRUCTIONS COMPONENT
+   Step-by-step guidance with numbered steps
+   ============================================ */
+
+.ds-instructions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md); /* 16px */
+  width: 100%;
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-instructions__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);
+  margin: 0;
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-instructions__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   STEP
+   ============================================ */
+
+.ds-instructions__step {
+  display: flex;
+  gap: var(--gap-sm); /* 8px */
+}
+
+/* ============================================
+   INDICATOR (badge + connector)
+   ============================================ */
+
+.ds-instructions__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-instructions__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  border: var(--border-xs) solid var(--color-action-primary-border);
+  background-color: transparent;
+  flex-shrink: 0;
+}
+
+.ds-instructions__badge .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-action-primary-bg);
+}
+
+.ds-instructions__number {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: 1;
+  color: var(--color-action-primary-bg);
+}
+
+.ds-instructions__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-action-primary-bg);
+}
+
+.ds-instructions__connector {
+  width: var(--border-xs); /* 1px */
+  flex: 1;
+  min-height: var(--padding-md); /* 16px */
+  background-color: var(--color-bg-container-border);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-instructions__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  padding-top: var(--padding-xxs); /* 4px — align text with badge center */
+  padding-bottom: var(--padding-md); /* 16px — space before next step */
+  min-width: 0;
+}
+
+.ds-instructions__step:last-child .ds-instructions__content {
+  padding-bottom: 0;
+}
+
+.ds-instructions__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);
+  margin: 0;
+}
+
+.ds-instructions__description {
+  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);
+  margin: 0;
+}
+
+/* ============================================
+   HORIZONTAL LAYOUT
+   ============================================ */
+
+.ds-instructions--horizontal .ds-instructions__list {
+  flex-direction: row;
+}
+
+.ds-instructions--horizontal .ds-instructions__step {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex: 1;
+}
+
+.ds-instructions--horizontal .ds-instructions__indicator {
+  flex-direction: row;
+  width: 100%;
+}
+
+.ds-instructions--horizontal .ds-instructions__connector {
+  width: auto;
+  height: var(--border-xs); /* 1px */
+  min-height: 0;
+  min-width: 0;
+  flex: 1;
+  align-self: center;
+}
+
+.ds-instructions--horizontal .ds-instructions__content {
+  padding-top: var(--padding-sm); /* 8px */
+  padding-bottom: 0;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-instructions--compact .ds-instructions__title {
+  font-size: var(--font-title-body-size);
+  line-height: var(--font-title-body-line-height);
+}
+
+.ds-instructions--compact .ds-instructions__badge {
+  width: 24px;
+  height: 24px;
+}
+
+.ds-instructions--compact .ds-instructions__badge .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-instructions--compact .ds-instructions__number {
+  font-size: 12px;
+}
+
+.ds-instructions--compact .ds-instructions__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.ds-instructions--compact .ds-instructions__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-instructions--compact .ds-instructions__description {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-instructions--compact .ds-instructions__content {
+  padding-top: var(--padding-xxxs); /* 2px */
+  padding-bottom: var(--padding-sm); /* 8px */
+}
+
+.ds-instructions--compact .ds-instructions__step:last-child .ds-instructions__content {
+  padding-bottom: 0;
+}

package/components/Instructions/Instructions.d.ts

@@ -0,0 +1,28 @@
+export interface InstructionStep {
+    /** Step label/title */
+    label: string;
+    /** Optional step description */
+    description?: string;
+    /** Optional custom icon — defaults to step number */
+    icon?: string;
+}
+export interface InstructionsProps {
+    /** Instructions title */
+    title?: string;
+    /** Array of instruction steps */
+    steps: InstructionStep[];
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Whether to show step numbers instead of icons */
+    numbered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Instructions component for step-by-step guidance.
+ * Displays an ordered list of steps with optional icons,
+ * descriptions, and connecting lines.
+ */
+export declare const Instructions: ({ title, steps, size, direction, numbered, className, }: InstructionsProps) => import("react").JSX.Element;

package/components/Instructions/Instructions.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Instructions.css";
+import "../../fonts/material-symbols.css";
+const Instructions = ({
+  title,
+  steps,
+  size = "default",
+  direction = "vertical",
+  numbered = true,
+  className = ""
+}) => {
+  const baseClass = "ds-instructions";
+  const sizeClass = `${baseClass}--${size}`;
+  const dirClass = `${baseClass}--${direction}`;
+  const classes = [baseClass, sizeClass, dirClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+    /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: steps.map((step, idx) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__step`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__indicator`, children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__badge`, children: step.icon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: step.icon }) : numbered ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__number`, children: idx + 1 }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }) }),
+        idx < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__connector` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+        /* @__PURE__ */ jsx("p", { className: `${baseClass}__label`, children: step.label }),
+        step.description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: step.description })
+      ] })
+    ] }, idx)) })
+  ] });
+};
+export {
+  Instructions
+};

package/components/LinkList/LinkList.css

@@ -0,0 +1,71 @@
+.ds-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-link-list__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-md);
+  text-decoration: none;
+  color: inherit;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-link-list__item:hover {
+  opacity: 0.8;
+}
+
+.ds-link-list__icon-wrap {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-link-list__logo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.ds-link-list__symbol {
+  font-size: 28px;
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+
+.ds-link-list__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.ds-link-list__title {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  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);
+}
+
+.ds-link-list__open-icon {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-text-tertiary);
+}
+
+.ds-link-list__sub {
+  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);
+}

package/components/LinkList/LinkList.d.ts

@@ -0,0 +1,20 @@
+export interface LinkListItem {
+    /** Link destination */
+    href: string;
+    /** Primary label — shown with the open_in_new icon */
+    label: string;
+    /** One or more subtitle lines shown below the label */
+    sub?: string | string[];
+    /** Path to a logo image (preferred over icon when both are set) */
+    logo?: string;
+    /** Alt text for the logo — defaults to empty string (decorative) */
+    logoAlt?: string;
+    /** Material Symbol name used when no logo is provided (e.g. "emoji_events") */
+    icon?: string;
+}
+export interface LinkListProps {
+    items: LinkListItem[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const LinkList: ({ items, className }: LinkListProps) => import("react").JSX.Element;