@robr0/design-system 0.1.0

package/components/SelectionCard/SelectionCard.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import "./SelectionCard.css";
+const CheckIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ds-selection-card__check-icon",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2 7.5L5.5 11L12 3",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+const SelectionCard = ({
+  mode = "radio",
+  options,
+  value,
+  onChange,
+  name,
+  className = ""
+}) => {
+  const baseClass = "ds-selection-card";
+  const selectedValues = Array.isArray(value) ? value : value !== void 0 ? [value] : [];
+  const isSelected = (optionValue) => selectedValues.includes(optionValue);
+  const handleSelect = (option) => {
+    if (option.disabled || !onChange) return;
+    if (mode === "radio") {
+      onChange(option.value);
+    } else {
+      const newValues = isSelected(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+      onChange(newValues);
+    }
+  };
+  const handleKeyDown = (e, option) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      handleSelect(option);
+    }
+  };
+  const groupRole = mode === "radio" ? "radiogroup" : "group";
+  const itemRole = mode === "radio" ? "radio" : mode === "toggle" ? "switch" : "checkbox";
+  const groupClasses = [`${baseClass}-group`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: groupClasses, role: groupRole, "aria-label": name, children: options.map((option) => {
+    const selected = isSelected(option.value);
+    const cardClasses = [
+      baseClass,
+      selected ? `${baseClass}--selected` : "",
+      option.disabled ? `${baseClass}--disabled` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cardClasses,
+        role: itemRole,
+        "aria-checked": selected,
+        "aria-disabled": option.disabled,
+        tabIndex: option.disabled ? -1 : 0,
+        onClick: () => handleSelect(option),
+        onKeyDown: (e) => handleKeyDown(e, option),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: option.label }),
+            option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: option.description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__indicator`, children: mode === "radio" ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio-dot` }) }) : mode === "toggle" ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__toggle ${selected ? "" : `${baseClass}__toggle--off`}`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__toggle-thumb`, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-selection-card__toggle-icon", "aria-hidden": "true", children: "check" }) }) }) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__checkbox`, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) })
+        ]
+      },
+      option.value
+    );
+  }) });
+};
+export {
+  SelectionCard
+};

package/components/Skeleton/Skeleton.css

@@ -0,0 +1,79 @@
+/* ============================================
+   SKELETON COMPONENT
+   Placeholder while content is loading
+   ============================================ */
+
+.ds-skeleton {
+  background-color: var(--color-bg-container-secondary);
+  position: relative;
+  overflow: hidden;
+}
+
+.ds-skeleton::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-bg-container-primary) 50%,
+    transparent 100%
+  );
+  animation: ds-skeleton-shimmer var(--motion-duration-loop-shimmer) ease-in-out infinite;
+}
+
+/* ============================================
+   TEXT VARIANT
+   ============================================ */
+
+.ds-skeleton--text {
+  height: 14px;
+  border-radius: var(--radius-sm);
+  width: 100%;
+}
+
+/* ============================================
+   CIRCULAR VARIANT
+   ============================================ */
+
+.ds-skeleton--circular {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+}
+
+/* ============================================
+   RECTANGULAR VARIANT
+   ============================================ */
+
+.ds-skeleton--rectangular {
+  width: 100%;
+  height: 100px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   TEXT GROUP
+   ============================================ */
+
+.ds-skeleton__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-xs);
+}
+
+/* ============================================
+   SHIMMER ANIMATION
+   ============================================ */
+
+@keyframes ds-skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,16 @@
+export interface SkeletonProps {
+    /** Shape of the skeleton */
+    variant?: 'text' | 'circular' | 'rectangular';
+    /** Width (CSS value, e.g. '100%', '200px') */
+    width?: string;
+    /** Height (CSS value, e.g. '20px', '100px') */
+    height?: string;
+    /** Number of text lines to render (only for text variant) */
+    lines?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Skeleton displays a placeholder while content is loading.
+ */
+export declare const Skeleton: ({ variant, width, height, lines, className, }: SkeletonProps) => import("react").JSX.Element;

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import "./Skeleton.css";
+const Skeleton = ({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className = ""
+}) => {
+  const baseClass = "ds-skeleton";
+  const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(" ");
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx("div", { className: `${baseClass}__group`, role: "status", "aria-label": "Loading", "aria-busy": "true", style: { width }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes,
+        "aria-hidden": "true",
+        style: {
+          width: i === lines - 1 ? "75%" : "100%",
+          height
+        }
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "status", "aria-label": "Loading", "aria-busy": "true", style: { width, height } });
+};
+export {
+  Skeleton
+};

package/components/Slider/Slider.css

@@ -0,0 +1,86 @@
+/* ============================================
+   SLIDER COMPONENT
+   Range input for selecting values
+   ============================================ */
+
+.ds-slider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* ============================================
+   INPUT — RESET & BASE
+   ============================================ */
+
+.ds-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-full);
+  outline: none;
+  cursor: pointer;
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-slider--compact .ds-slider__input {
+  height: 4px;
+}
+
+/* ============================================
+   THUMB — WEBKIT
+   ============================================ */
+
+.ds-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  background: var(--color-action-primary-bg);
+  border: 2px solid var(--color-action-primary-bg);
+  cursor: pointer;
+  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-slider--compact .ds-slider__input::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-slider__input::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 4px var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   THUMB — MOZ
+   ============================================ */
+
+.ds-slider__input::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  background: var(--color-action-primary-bg);
+  border: 2px solid var(--color-action-primary-bg);
+  cursor: pointer;
+  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-slider--compact .ds-slider__input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-slider__input::-moz-range-thumb:hover {
+  box-shadow: 0 0 0 4px var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-slider--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/components/Slider/Slider.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface SliderProps {
+    /** Current value */
+    value?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size */
+    size?: 'default' | 'compact';
+    /** Change handler */
+    onChange?: (value: number) => void;
+    /** Accessible label */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Slider allows selecting a value from within a given range.
+ */
+export declare const Slider: ({ value, min, max, step, disabled, size, onChange, ariaLabel, className, }: SliderProps) => React.JSX.Element;

package/components/Slider/Slider.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import "./Slider.css";
+const Slider = ({
+  value = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  size = "default",
+  onChange,
+  ariaLabel = "Slider",
+  className = ""
+}) => {
+  const baseClass = "ds-slider";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    disabled ? `${baseClass}--disabled` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const percentage = (value - min) / (max - min) * 100;
+  const handleChange = (e) => {
+    onChange?.(Number(e.target.value));
+  };
+  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      className: `${baseClass}__input`,
+      value,
+      min,
+      max,
+      step,
+      disabled,
+      onChange: handleChange,
+      "aria-label": ariaLabel,
+      style: {
+        background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-secondary) ${percentage}%)`
+      }
+    }
+  ) });
+};
+export {
+  Slider
+};

package/components/SpacingSwatch/SpacingSwatch.css

@@ -0,0 +1,108 @@
+/* ============================================
+   SPACING SWATCH COMPONENT
+   Card that displays a spatial token with a
+   visual preview, size label, and pixel value.
+   ============================================ */
+
+.ds-spacing-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-lg); /* 20px */
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 140px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary-semi);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl); /* 24px */
+  padding: var(--padding-lg); /* 20px */
+}
+
+/* ============================================
+   PREVIEW AREA
+   Centred container for the visual element
+   ============================================ */
+
+.ds-spacing-swatch__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60px;
+}
+
+/* ============================================
+   BORDER VARIANT
+   Vertical coloured bar showing border width
+   ============================================ */
+
+.ds-spacing-swatch__border-bar {
+  height: 50px;
+  background: var(--color-core-accent-violet);
+}
+
+/* ============================================
+   RADIUS VARIANT
+   Square with visible border-radius
+   ============================================ */
+
+.ds-spacing-swatch__radius-box {
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  border: 1px solid var(--color-status-positive-border);
+}
+
+/* ============================================
+   GAP VARIANT
+   Two vertical lines separated by the gap width
+   ============================================ */
+
+.ds-spacing-swatch__gap-bar {
+  height: 50px;
+  border-left: 1px solid var(--color-core-accent-coral);
+  border-right: 1px solid var(--color-core-accent-coral);
+}
+
+/* ============================================
+   PADDING VARIANT
+   Outer box with inner box showing the padding
+   ============================================ */
+
+.ds-spacing-swatch__padding-outer {
+  border: 1px solid var(--color-core-ui-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-spacing-swatch__padding-inner {
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--color-status-neutral-border);
+  border-radius: 1px;
+}
+
+/* ============================================
+   LABEL & VALUE
+   ============================================ */
+
+.ds-spacing-swatch__label {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-primary);
+  text-align: center;
+}
+
+.ds-spacing-swatch__value {
+  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);
+}

package/components/SpacingSwatch/SpacingSwatch.d.ts

@@ -0,0 +1,20 @@
+export type SpacingSwatchVariant = 'border' | 'radius' | 'gap' | 'padding';
+export interface SpacingSwatchProps {
+    /** Size label (e.g. "XS", "MD", "Full") */
+    label: string;
+    /** Pixel value to display (e.g. "1px", "24px", "999px") */
+    value: string;
+    /** Numeric pixel amount used to size the preview element */
+    px: number;
+    /** Which type of spatial preview to render */
+    variant: SpacingSwatchVariant;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SpacingSwatch component from Figma design system.
+ * Displays a spatial token card with a visual preview,
+ * size label, and pixel value. Four variants cover
+ * border width, radius, gap, and padding tokens.
+ */
+export declare const SpacingSwatch: ({ label, value, px, variant, className, }: SpacingSwatchProps) => import("react").JSX.Element;

package/components/SpacingSwatch/SpacingSwatch.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./SpacingSwatch.css";
+const SpacingSwatch = ({
+  label,
+  value,
+  px,
+  variant,
+  className = ""
+}) => {
+  const baseClass = "ds-spacing-swatch";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__preview`, children: [
+      variant === "border" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__border-bar`,
+          style: { width: `${px}px` }
+        }
+      ),
+      variant === "radius" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__radius-box`,
+          style: { borderRadius: px >= 999 ? "50%" : `${px}px` }
+        }
+      ),
+      variant === "gap" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__gap-bar`,
+          style: { width: `${px}px` }
+        }
+      ),
+      variant === "padding" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__padding-outer`,
+          style: { padding: `${px}px` },
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__padding-inner` })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value })
+  ] });
+};
+export {
+  SpacingSwatch
+};

package/components/Spinner/Spinner.css

@@ -0,0 +1,73 @@
+/* ============================================
+   SPINNER COMPONENT
+   Animated circular loading indicator
+   ============================================ */
+
+.ds-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.ds-spinner--sm {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-spinner--md {
+  width: 24px;
+  height: 24px;
+}
+
+.ds-spinner--lg {
+  width: 36px;
+  height: 36px;
+}
+
+/* ============================================
+   SVG
+   ============================================ */
+
+.ds-spinner__circle {
+  width: 100%;
+  height: 100%;
+  animation: ds-spinner-rotate var(--motion-duration-loop-spin) var(--motion-ease-linear) infinite;
+}
+
+.ds-spinner__track {
+  stroke: var(--color-bg-container-secondary);
+}
+
+.ds-spinner__arc {
+  stroke-dasharray: 44;
+  stroke-dashoffset: 32;
+}
+
+/* ============================================
+   VARIANTS
+   ============================================ */
+
+.ds-spinner--primary .ds-spinner__arc {
+  stroke: var(--color-action-primary-bg);
+}
+
+.ds-spinner--neutral .ds-spinner__arc {
+  stroke: var(--color-text-secondary);
+}
+
+/* ============================================
+   ANIMATION
+   ============================================ */
+
+@keyframes ds-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/Spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+export interface SpinnerProps {
+    /** Size of the spinner */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'primary' | 'neutral';
+    /** Accessible label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Spinner indicates a loading state with an animated circular indicator.
+ */
+export declare const Spinner: ({ size, variant, label, className, }: SpinnerProps) => import("react").JSX.Element;

package/components/Spinner/Spinner.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Spinner.css";
+const Spinner = ({
+  size = "md",
+  variant = "primary",
+  label = "Loading",
+  className = ""
+}) => {
+  const baseClass = "ds-spinner";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    `${baseClass}--${variant}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, role: "status", "aria-label": label, children: /* @__PURE__ */ jsxs("svg", { className: `${baseClass}__circle`, viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: `${baseClass}__track`,
+        cx: "12",
+        cy: "12",
+        r: "10",
+        strokeWidth: "3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: `${baseClass}__arc`,
+        cx: "12",
+        cy: "12",
+        r: "10",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    )
+  ] }) });
+};
+export {
+  Spinner
+};