@robr0/design-system 0.1.0

package/components/Breadcrumb/Breadcrumb.css

@@ -0,0 +1,92 @@
+/* ============================================
+   BREADCRUMB COMPONENT
+   Hierarchical navigation trail
+   ============================================ */
+
+.ds-breadcrumb {
+  width: 100%;
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-xxs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.ds-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* ============================================
+   LINK
+   ============================================ */
+
+.ds-breadcrumb__link {
+  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-secondary);
+  text-decoration: none;
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-breadcrumb__link:hover {
+  color: var(--color-text-primary);
+  text-decoration: underline;
+}
+
+.ds-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   CURRENT (last item)
+   ============================================ */
+
+.ds-breadcrumb__current {
+  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);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.ds-breadcrumb__separator {
+  font-size: 18px;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ============================================
+   ELLIPSIS
+   ============================================ */
+
+.ds-breadcrumb__ellipsis {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  color: var(--color-text-tertiary);
+  user-select: none;
+}

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,19 @@
+export interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Link href — omit for the current / last item */
+    href?: string;
+}
+export interface BreadcrumbProps {
+    /** Ordered list of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Maximum visible items before collapsing (min 2: first + last) */
+    maxItems?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Breadcrumb shows the user's location within a page hierarchy.
+ * Supports automatic collapsing of middle items when the list exceeds maxItems.
+ */
+export declare const Breadcrumb: ({ items, maxItems, className, }: BreadcrumbProps) => import("react").JSX.Element;

package/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Breadcrumb.css";
+import "../../fonts/material-symbols.css";
+const Breadcrumb = ({
+  items,
+  maxItems,
+  className = ""
+}) => {
+  const baseClass = "ds-breadcrumb";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const shouldCollapse = maxItems !== void 0 && maxItems >= 2 && items.length > maxItems;
+  let visibleItems;
+  if (shouldCollapse) {
+    const tailCount = maxItems - 1;
+    visibleItems = [
+      items[0],
+      "ellipsis",
+      ...items.slice(-tailCount)
+    ];
+  } else {
+    visibleItems = [...items];
+  }
+  return /* @__PURE__ */ jsx("nav", { className: classes, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: visibleItems.map((item, index) => {
+    const isLast = index === visibleItems.length - 1;
+    if (item === "ellipsis") {
+      return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__separator material-symbols-rounded`, children: "chevron_right" }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__ellipsis`, children: "…" })
+      ] }, "ellipsis");
+    }
+    return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__separator material-symbols-rounded`, "aria-hidden": "true", children: "chevron_right" }),
+      isLast || !item.href ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__current`, "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx("a", { href: item.href, className: `${baseClass}__link`, children: item.label })
+    ] }, index);
+  }) }) });
+};
+export {
+  Breadcrumb
+};

package/components/Button/Button.css

@@ -0,0 +1,381 @@
+/* ============================================
+   BUTTON COMPONENT
+   Figma design system button component
+   ============================================ */
+
+.ds-button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm); /* Figma: --radius/sm (8px) */
+
+  /* Spacing */
+  padding: var(--padding-sm) var(--padding-lg); /* Figma: --padding/sm (8px) & --radius/lg (16px) */
+
+  /* Border radius */
+  border-radius: var(--radius-full); /* Figma: --radius/full (999px) */
+
+  /* Typography - Using paragraph em (medium weight) for clickable controls */
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  font-size: var(--font-paragraph-em-size);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  text-align: center;
+
+  /* Transitions */
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Reset */
+  cursor: pointer;
+  border: none;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* ============================================
+   SIZE — DEFAULT (no overrides needed, base styles apply)
+   ============================================ */
+
+.ds-button--default {
+  /* Base padding & typography inherited from .ds-button */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-button--compact {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+  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-button--compact .ds-button__icon {
+  --icon-size: var(--icon-size-sm);
+/* Figma: compact icons are 20px (vs 24px default) */
+}
+
+/* Scale any child SVG to fit the compact icon slot */
+.ds-button--compact .ds-button__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ============================================
+   PRIMARY BUTTON (SOLID)
+   ============================================ */
+
+.ds-button--primary {
+  background-color: var(--color-action-primary-bg);
+  border: none;
+}
+
+.ds-button--primary .ds-button__text {
+  color: var(--color-action-primary-text);
+}
+
+.ds-button--primary.ds-button--hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--primary.ds-button--hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary.ds-button--active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-button--primary.ds-button--active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary.ds-button--disabled {
+  background-color: var(--color-action-primary-bg);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SECONDARY BUTTON (OUTLINED)
+   ============================================ */
+
+.ds-button--secondary {
+  /* Figma: --action/primary/border/primary (#0a4e66) - 1px border */
+  border: var(--border-xs) solid var(--color-action-primary-border);
+  background-color: transparent;
+}
+
+.ds-button--secondary .ds-button__text {
+  /* Figma: --text/primary */
+  color: var(--color-text-primary);
+}
+
+.ds-button--secondary.ds-button--default {
+  border: var(--border-xs) solid var(--color-action-primary-border);
+  background-color: transparent;
+}
+
+.ds-button--secondary.ds-button--hover {
+  /* Figma: hover state - 1px border */
+  border: var(--border-xs) solid var(--color-action-primary-border);
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--secondary.ds-button--hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary.ds-button--active {
+  /* Figma: --action/primary/background/active (#0a4e66) - 1px border */
+  background-color: var(--color-action-primary-bg-active);
+  border: var(--border-xs) solid var(--color-action-primary-border);
+}
+
+.ds-button--secondary.ds-button--active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary.ds-button--disabled {
+  border: var(--border-xs) solid var(--color-action-primary-border);
+  background-color: transparent;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   TERTIARY BUTTON (PASSIVE / GHOST)
+   ============================================ */
+
+.ds-button--tertiary {
+  /* Figma: --action/passive/background/primary (rgba(241, 241, 241, 0.01)) */
+  background-color: var(--color-action-passive-bg);
+  border: none;
+}
+
+.ds-button--tertiary .ds-button__text {
+  /* Figma: --action/passive/text/primary (#050505) */
+  color: var(--color-action-passive-text);
+}
+
+.ds-button--tertiary.ds-button--default {
+  background-color: var(--color-action-passive-bg);
+}
+
+.ds-button--tertiary.ds-button--hover {
+  /* Figma: hover background (#d6d6d6) */
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-button--tertiary.ds-button--active {
+  /* Figma: --action/passive/background/active (#bcbcbc) */
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-button--tertiary.ds-button--disabled {
+  background-color: var(--color-action-passive-bg);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   DESTRUCTIVE BUTTON
+   For dangerous actions: delete, remove, etc.
+   Uses accent-coral as the border / fill colour.
+   ============================================ */
+
+.ds-button--destructive {
+  border: var(--border-xs) solid var(--color-core-accent-coral);
+  background-color: transparent;
+}
+
+.ds-button--destructive .ds-button__text {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--default {
+  border: var(--border-xs) solid var(--color-core-accent-coral);
+  background-color: transparent;
+}
+
+.ds-button--destructive.ds-button--hover {
+  border: var(--border-xs) solid var(--color-core-accent-coral);
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--hover .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive.ds-button--active {
+  border: var(--border-xs) solid var(--color-core-accent-coral);
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--active .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive.ds-button--disabled {
+  border: var(--border-xs) solid var(--color-core-accent-coral);
+  background-color: transparent;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-button__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-md);
+/* Figma: default icons are 24px */
+  line-height: 1;
+}
+
+/* Scale any child SVG to fit the icon slot */
+.ds-button__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.ds-button--primary .ds-button__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-button--primary.ds-button--active .ds-button__icon,
+.ds-button--primary.ds-button--hover .ds-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary .ds-button__icon {
+  color: var(--color-action-icon-default);
+}
+
+.ds-button--secondary.ds-button--active .ds-button__icon,
+.ds-button--secondary.ds-button--hover .ds-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-button--tertiary .ds-button__icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-button--destructive .ds-button__icon {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--hover .ds-button__icon,
+.ds-button--destructive.ds-button--active .ds-button__icon {
+  color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   TEXT
+   ============================================ */
+
+.ds-button__text {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   HOVER STATES (for interactive use)
+   ============================================ */
+
+.ds-button--primary:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--primary:not(.ds-button--disabled):hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary:not(.ds-button--disabled):hover .ds-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):hover .ds-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-button--tertiary:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):hover {
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):hover .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):hover .ds-button__icon {
+  color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   ACTIVE STATES (for interactive use)
+   ============================================ */
+
+.ds-button--primary:not(.ds-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-button--primary:not(.ds-button--disabled):active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary:not(.ds-button--disabled):active .ds-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):active .ds-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-button--tertiary:not(.ds-button--disabled):active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):active {
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):active .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):active .ds-button__icon {
+  color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/Button/Button.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+export interface ButtonProps {
+    /** Button text content */
+    label?: string;
+    /** Icon for left side — Material Symbol name (string) or custom element (ReactNode) */
+    iconLeft?: string | React.ReactNode;
+    /** Icon for right side — Material Symbol name (string) or custom element (ReactNode) */
+    iconRight?: string | React.ReactNode;
+    /** Button priority/variant */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
+    /** Button state */
+    state?: 'default' | 'hover' | 'active' | 'disabled';
+    /** Button size */
+    size?: 'default' | 'compact';
+    /** Show text label */
+    text?: boolean;
+    /** Optional click handler */
+    onClick?: () => void;
+    /** Optional href — renders as <a> instead of <button> */
+    href?: string;
+    /** Optional target attribute for links */
+    target?: string;
+    /** Optional rel attribute for links */
+    rel?: string;
+    /** Marks this link as the current page (adds aria-current="page") */
+    ariaCurrent?: boolean;
+    /** Id of an element describing this button — set automatically by Tooltip */
+    'aria-describedby'?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** @deprecated Use iconLeft instead */
+    icon?: string;
+}
+/**
+ * Button component from Figma design system
+ * Supports primary and secondary variants with multiple states
+ * Icons can be placed on the left and/or right side of the text
+ */
+export declare const Button: ({ label, iconLeft, iconRight, priority, state, size, text, onClick, href, target, rel, ariaCurrent, "aria-describedby": ariaDescribedby, className, icon, }: ButtonProps) => React.JSX.Element;

package/components/Button/Button.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "react";
+import "./Button.css";
+import "../../fonts/material-symbols.css";
+const Button = ({
+  label = "Button",
+  iconLeft,
+  iconRight,
+  priority = "primary",
+  state = "default",
+  size = "default",
+  text = true,
+  onClick,
+  href,
+  target,
+  rel,
+  ariaCurrent,
+  "aria-describedby": ariaDescribedby,
+  className = "",
+  icon
+  // deprecated, maps to iconLeft for backwards compatibility
+}) => {
+  const baseClass = "ds-button";
+  const variantClass = `${baseClass}--${priority}`;
+  const stateClass = `${baseClass}--${state}`;
+  const sizeClass = `${baseClass}--${size}`;
+  const classes = [baseClass, variantClass, stateClass, sizeClass, className].filter(Boolean).join(" ");
+  const isDisabled = state === "disabled";
+  const iconClass = "material-symbols-rounded";
+  const leftIcon = iconLeft || icon;
+  const renderIcon = (iconProp) => {
+    if (typeof iconProp === "string") {
+      return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon ${iconClass}`, "aria-hidden": "true", children: iconProp });
+    }
+    return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: iconProp });
+  };
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon && renderIcon(leftIcon),
+    text && /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label }),
+    iconRight && renderIcon(iconRight)
+  ] });
+  if (href && !isDisabled) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: classes,
+        href,
+        target,
+        rel,
+        "aria-current": ariaCurrent ? "page" : void 0,
+        "aria-describedby": ariaDescribedby,
+        onClick,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      disabled: isDisabled,
+      "aria-describedby": ariaDescribedby,
+      children
+    }
+  );
+};
+export {
+  Button
+};

package/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,39 @@
+/* ============================================
+   BUTTON GROUP COMPONENT
+   Container for grouped buttons in nav/subnav
+   ============================================ */
+
+.ds-button-group {
+  /* Layout */
+  display: inline-flex; /* Hug content instead of stretch */
+  width: auto; /* Don't stretch to full width */
+  overflow: hidden;
+}
+
+/* ============================================
+   HORIZONTAL ORIENTATION
+   Default for top navigation
+   ============================================ */
+
+.ds-button-group--horizontal {
+  flex-direction: row;
+  gap: var(--gap-lg); /* Figma: --gap/lg (20px) */
+  align-items: flex-start;
+}
+
+/* ============================================
+   VERTICAL ORIENTATION
+   For subnav/mobile navigation
+   ============================================ */
+
+.ds-button-group--vertical {
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  align-items: flex-start; /* Left-aligned, hug content */
+}
+
+/* Vertical buttons hug their content by default */
+.ds-button-group--vertical .ds-button {
+  width: auto; /* Hug content instead of stretch */
+  display: inline-flex; /* Hug content */
+}

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button/Button';
+export interface ButtonGroupProps {
+    /** Orientation of the button group */
+    orientation?: 'horizontal' | 'vertical';
+    /** Array of button configurations */
+    buttons: Array<ButtonProps>;
+    /** Accessible label for the group */
+    ariaLabel?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;