@robr0/design-system 0.1.0

package/components/EmptyState/EmptyState.css

@@ -0,0 +1,115 @@
+/* ============================================
+   EMPTY STATE COMPONENT
+   Placeholder for lists, tables, and searches
+   that have nothing to show
+   ============================================ */
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--gap-md); /* 16px */
+  padding: var(--padding-xl); /* 32px */
+  width: 100%;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-empty-state__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs); /* 4px */
+  max-width: 420px;
+}
+
+.ds-empty-state__title {
+  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);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ds-empty-state__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);
+  margin: 0;
+}
+
+/* ============================================
+   ACTION
+   ============================================ */
+
+.ds-empty-state__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--gap-sm); /* 8px */
+}
+
+/* ============================================
+   VARIANT — BORDERED
+   Dashed container for use inside cards/tables
+   ============================================ */
+
+.ds-empty-state--bordered {
+  border: var(--border-xs) dashed var(--color-bg-container-border);
+  border-radius: var(--radius-md); /* 12px */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-empty-state--compact {
+  gap: var(--gap-sm); /* 8px */
+  padding: var(--padding-lg); /* 20px */
+}
+
+.ds-empty-state--compact .ds-empty-state__icon {
+  width: 36px;
+  height: 36px;
+}
+
+.ds-empty-state--compact .ds-empty-state__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-empty-state--compact .ds-empty-state__title {
+  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);
+}

package/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface EmptyStateProps {
+    /** Material Symbol icon name, or a custom element (e.g. an illustration) */
+    icon?: string | React.ReactNode;
+    /** Short headline describing the empty condition */
+    title: string;
+    /** Supporting copy — say what to do next, not just what is missing */
+    description?: string;
+    /** Action slot — typically one primary Button, optionally a secondary */
+    action?: React.ReactNode;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /**
+     * Visual treatment. `plain` sits directly on the page; `bordered` draws a
+     * dashed container, which reads better inside a card, table, or panel.
+     */
+    variant?: 'plain' | 'bordered';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * EmptyState component — the placeholder shown when a list, table, search,
+ * or dashboard has nothing to display. Pairs an icon with a headline,
+ * supporting copy, and an optional action so the blank space still tells
+ * the user what to do next.
+ */
+export declare const EmptyState: ({ icon, title, description, action, size, variant, className, }: EmptyStateProps) => React.JSX.Element;

package/components/EmptyState/EmptyState.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./EmptyState.css";
+import "../../fonts/material-symbols.css";
+const EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  size = "default",
+  variant = "plain",
+  className = ""
+}) => {
+  const baseClass = "ds-empty-state";
+  const classes = [
+    baseClass,
+    `${baseClass}--${variant}`,
+    size === "compact" ? `${baseClass}--compact` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+      /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: `${baseClass}__action`, children: action })
+  ] });
+};
+export {
+  EmptyState
+};

package/components/EntityCard/EntityCard.css

@@ -0,0 +1,69 @@
+/* ============================================
+   ENTITY CARD COMPONENT
+   Compact card with a centred icon or image
+   and a label. Used on Icons and Logos pages.
+   ============================================ */
+
+.ds-entity-card {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-md);
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 100px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl);
+  padding: var(--padding-lg);
+}
+
+/* ============================================
+   PREVIEW AREA
+   ============================================ */
+
+.ds-entity-card__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 48px;
+}
+
+/* ============================================
+   ICON (Material Symbols Rounded)
+   ============================================ */
+
+.ds-entity-card__icon {
+  --icon-size: var(--icon-size-lg);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   IMAGE (Logo SVGs etc.)
+   ============================================ */
+
+.ds-entity-card__image {
+  max-width: 100%;
+  max-height: 48px;
+  object-fit: contain;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-entity-card__label {
+  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);
+  text-align: center;
+  word-break: break-word;
+}

package/components/EntityCard/EntityCard.d.ts

@@ -0,0 +1,18 @@
+export interface EntityCardProps {
+    /** Display label beneath the icon / image */
+    label: string;
+    /** Material Symbol icon name rendered via the rounded font (e.g. "home") */
+    icon?: string;
+    /** Path to an image asset — used instead of icon when provided */
+    imageSrc?: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * EntityCard
+ * A compact card with a centred icon (Material Symbols Rounded)
+ * or image and a label underneath. Used on Icons and Logos pages.
+ */
+export declare const EntityCard: ({ label, icon, imageSrc, imageAlt, className, }: EntityCardProps) => import("react").JSX.Element;

package/components/EntityCard/EntityCard.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./EntityCard.css";
+const EntityCard = ({
+  label,
+  icon,
+  imageSrc,
+  imageAlt,
+  className = ""
+}) => {
+  const baseClass = "ds-entity-card";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__preview`, children: imageSrc ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageSrc,
+        alt: imageAlt || label,
+        className: `${baseClass}__image`
+      }
+    ) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : null }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+  ] });
+};
+export {
+  EntityCard
+};

package/components/Figure/Figure.css

@@ -0,0 +1,61 @@
+/* ============================================
+   FIGURE COMPONENT
+   Image + caption in a rounded container.
+   Pass onClick for a zoomable (lightbox) figure.
+   ============================================ */
+
+.ds-figure {
+  margin: 0;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   MEDIA — child img/picture fills the width
+   ============================================ */
+
+.ds-figure__media {
+  display: block;
+  line-height: 0;
+}
+
+.ds-figure__media img {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   CAPTION
+   ============================================ */
+
+.ds-figure__caption {
+  display: block;
+  padding: var(--padding-md) var(--padding-lg);
+  border-top: var(--border-xs) solid var(--color-bg-container-border);
+  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);
+}
+
+/* ============================================
+   ZOOMABLE (has onClick)
+   ============================================ */
+
+.ds-figure--zoomable {
+  cursor: zoom-in;
+}
+
+.ds-figure--zoomable:hover .ds-figure__media img {
+  opacity: 0.88;
+}
+
+.ds-figure--zoomable:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/Figure/Figure.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface FigureProps {
+    /** The image element — a plain <img> or a framework image component */
+    children: React.ReactNode;
+    /** Caption rendered below the image */
+    caption?: React.ReactNode;
+    /** Click handler (e.g. open a lightbox) — adds zoom affordance + keyboard support */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Figure component — an image with an optional caption in a bordered,
+ * rounded container. Pass onClick to make it zoomable (adds the
+ * zoom cursor, hover dim, and keyboard activation).
+ */
+export declare const Figure: ({ children, caption, onClick, className, }: FigureProps) => React.JSX.Element;

package/components/Figure/Figure.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Figure.css";
+const Figure = ({
+  children,
+  caption,
+  onClick,
+  className = ""
+}) => {
+  const baseClass = "ds-figure";
+  const classes = [baseClass, onClick && `${baseClass}--zoomable`, className].filter(Boolean).join(" ");
+  const onKeyDown = onClick ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick();
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: classes,
+      onClick,
+      onKeyDown,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children }),
+        caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
+      ]
+    }
+  );
+};
+export {
+  Figure
+};