@robr0/design-system 0.1.0

package/components/ToggleGroup/ToggleGroup.css

@@ -0,0 +1,84 @@
+/* ============================================
+   TOGGLE GROUP COMPONENT
+   A set of two-state buttons
+   ============================================ */
+
+.ds-toggle-group {
+  display: inline-flex;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.ds-toggle-group__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-xs) var(--padding-sm);
+  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-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-toggle-group__item + .ds-toggle-group__item {
+  border-left: var(--border-xs) solid var(--color-bg-container-border);
+}
+
+.ds-toggle-group__item .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   ITEM — HOVER
+   ============================================ */
+
+.ds-toggle-group__item:hover {
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   ITEM — ACTIVE
+   ============================================ */
+
+.ds-toggle-group__item--active {
+  background-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-toggle-group__item--active:hover {
+  background-color: var(--color-action-primary-bg-hover);
+  color: var(--color-action-primary-text);
+}
+
+/* ============================================
+   COMPACT
+   ============================================ */
+
+.ds-toggle-group--compact .ds-toggle-group__item {
+  padding: var(--padding-xxs) var(--padding-xs);
+}
+
+.ds-toggle-group--compact .ds-toggle-group__item .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-toggle-group--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,30 @@
+export interface ToggleGroupItem {
+    /** Unique value */
+    value: string;
+    /** Display label or icon name (Material Symbols) */
+    label: string;
+    /** Use Material Symbol icon instead of text */
+    icon?: boolean;
+}
+export interface ToggleGroupProps {
+    /** Available items */
+    items: ToggleGroupItem[];
+    /** Currently active value(s) */
+    value?: string | string[];
+    /** Allow multiple selection */
+    multiple?: boolean;
+    /** Size */
+    size?: 'default' | 'compact';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Change handler */
+    onChange?: (value: string | string[]) => void;
+    /** Accessible label for the group */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ToggleGroup is a set of two-state buttons that can be toggled on or off.
+ */
+export declare const ToggleGroup: ({ items, value, multiple, size, disabled, onChange, ariaLabel, className, }: ToggleGroupProps) => import("react").JSX.Element;

package/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import "./ToggleGroup.css";
+const ToggleGroup = ({
+  items,
+  value = [],
+  multiple = false,
+  size = "default",
+  disabled = false,
+  onChange,
+  ariaLabel,
+  className = ""
+}) => {
+  const baseClass = "ds-toggle-group";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    disabled ? `${baseClass}--disabled` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const activeValues = Array.isArray(value) ? value : [value];
+  const handleClick = (itemValue) => {
+    if (disabled) return;
+    if (multiple) {
+      const next = activeValues.includes(itemValue) ? activeValues.filter((v) => v !== itemValue) : [...activeValues, itemValue];
+      onChange?.(next);
+    } else {
+      onChange?.(itemValue);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children: items.map((item) => {
+    const isActive = activeValues.includes(item.value);
+    const btnClass = [
+      `${baseClass}__item`,
+      isActive ? `${baseClass}__item--active` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: btnClass,
+        onClick: () => handleClick(item.value),
+        "aria-pressed": isActive,
+        "aria-label": item.icon ? item.label : void 0,
+        disabled,
+        type: "button",
+        children: item.icon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: item.label }) : item.label
+      },
+      item.value
+    );
+  }) });
+};
+export {
+  ToggleGroup
+};

package/components/ToggleSwitch/ToggleSwitch.css

@@ -0,0 +1,139 @@
+/* ============================================
+   TOGGLE SWITCH COMPONENT
+   Dark/Light mode toggle with check icon
+   ============================================ */
+
+.ds-toggle-switch {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+
+  /* Reset */
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-family);
+}
+
+/* ============================================
+   TRACK
+   ============================================ */
+
+.ds-toggle-switch__track {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-action-primary-bg);
+  transition: background-color var(--motion-duration-slow) var(--motion-ease-standard);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   THUMB
+   ============================================ */
+
+.ds-toggle-switch__thumb {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 20px;
+  height: 20px;
+  background: var(--color-control-thumb);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-spring);
+}
+
+.ds-toggle-switch__thumb-icon {
+  /* Intentionally off the --icon-size-* scale. This check sits inside the
+     20x20 thumb; the smallest scale step is also 20px, which would fill the
+     thumb edge to edge. Control-internal glyph, not a UI icon.
+
+     Set via --icon-size (not font-size): .material-symbols-rounded derives
+     font-size, width, and height from it together. Overriding font-size
+     alone leaves the box at the 24px default, so the glyph hangs off-centre
+     inside the thumb. */
+  --icon-size: 14px;
+  color: var(--color-action-primary-bg);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-toggle-switch__label {
+  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);
+  min-width: 95px;
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+/* Off / Unchecked state — thumb moves to the left */
+.ds-toggle-switch--off .ds-toggle-switch__track {
+  background: var(--color-text-secondary);
+}
+
+.ds-toggle-switch--off .ds-toggle-switch__thumb {
+  transform: translateX(-18px);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-toggle-switch:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-toggle-switch--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-toggle-switch--compact .ds-toggle-switch__track {
+  width: 34px;
+  height: 20px;
+}
+
+.ds-toggle-switch--compact .ds-toggle-switch__thumb {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-toggle-switch--compact .ds-toggle-switch__thumb-icon {
+  /* Off-scale for the same reason as the default size — the compact thumb
+     is only 16x16. */
+  --icon-size: 12px;
+}
+
+.ds-toggle-switch--compact .ds-toggle-switch__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  min-width: 80px;
+}
+
+.ds-toggle-switch--compact.ds-toggle-switch--off .ds-toggle-switch__thumb {
+  transform: translateX(-14px);
+}

package/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,23 @@
+export interface ToggleSwitchProps {
+    /** Whether the toggle is on (checked) */
+    checked?: boolean;
+    /** Label text displayed next to the toggle */
+    label?: string;
+    /** Whether to show the label */
+    showLabel?: boolean;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Callback when toggled */
+    onChange?: (checked: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label for the button */
+    ariaLabel?: string;
+}
+/**
+ * ToggleSwitch component from Figma design system
+ * Used for binary on/off settings like theme switching
+ */
+export declare const ToggleSwitch: ({ checked, label, showLabel, disabled, size, onChange, className, ariaLabel, }: ToggleSwitchProps) => import("react").JSX.Element;

package/components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./ToggleSwitch.css";
+import "../../fonts/material-symbols.css";
+const ToggleSwitch = ({
+  checked = true,
+  label = "Toggle",
+  showLabel = true,
+  disabled = false,
+  size = "default",
+  onChange,
+  className = "",
+  ariaLabel
+}) => {
+  const baseClass = "ds-toggle-switch";
+  const stateClass = checked ? "" : `${baseClass}--off`;
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
+  const classes = [baseClass, sizeClass, stateClass, disabledClass, className].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: handleClick,
+      disabled,
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": ariaLabel || label,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__thumb`, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${baseClass}__thumb-icon material-symbols-rounded`,
+            "aria-hidden": "true",
+            children: "check"
+          }
+        ) }) }),
+        showLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+      ]
+    }
+  );
+};
+export {
+  ToggleSwitch
+};

package/components/Tooltip/Tooltip.css

@@ -0,0 +1,122 @@
+/* ============================================
+   TOOLTIP COMPONENT
+   Contextual text label on hover / focus
+   ============================================ */
+
+.ds-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-tooltip__panel {
+  position: absolute;
+  z-index: 50;
+  padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
+  border-radius: var(--radius-xs); /* 4px */
+  background-color: var(--color-bg-container-inverse);
+  color: var(--color-text-on-inverse);
+  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);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-tooltip__panel--visible {
+  opacity: 1;
+}
+
+/* ============================================
+   POSITIONS
+   ============================================ */
+
+.ds-tooltip__panel--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  margin-bottom: var(--gap-xs); /* 4px */
+}
+
+.ds-tooltip__panel--top.ds-tooltip__panel--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+.ds-tooltip__panel--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+  margin-top: var(--gap-xs);
+}
+
+.ds-tooltip__panel--bottom.ds-tooltip__panel--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+.ds-tooltip__panel--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+  margin-right: var(--gap-xs);
+}
+
+.ds-tooltip__panel--left.ds-tooltip__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+.ds-tooltip__panel--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  margin-left: var(--gap-xs);
+}
+
+.ds-tooltip__panel--right.ds-tooltip__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.ds-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-bg-container-inverse);
+  transform: rotate(45deg);
+}
+
+/* Arrow — top position (arrow points down) */
+.ds-tooltip__panel--top .ds-tooltip__arrow {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+/* Arrow — bottom position (arrow points up) */
+.ds-tooltip__panel--bottom .ds-tooltip__arrow {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+/* Arrow — left position (arrow points right) */
+.ds-tooltip__panel--left .ds-tooltip__arrow {
+  right: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+/* Arrow — right position (arrow points left) */
+.ds-tooltip__panel--right .ds-tooltip__arrow {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+}

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface TooltipProps {
+    /** Trigger element */
+    children?: ReactNode;
+    /** Tooltip text content */
+    content: string;
+    /** Preferred position */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Delay before showing (in ms) */
+    showDelay?: number;
+    /** Delay before hiding (in ms) */
+    hideDelay?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Tooltip component for contextual text labels.
+ * Appears on hover or focus with a short delay.
+ * Uses inverted colours (dark background in light theme).
+ */
+export declare const Tooltip: ({ children, content, position, showDelay, hideDelay, className, }: TooltipProps) => import("react").JSX.Element;

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useId, isValidElement, cloneElement } from "react";
+import "./Tooltip.css";
+const Tooltip = ({
+  children,
+  content,
+  position = "top",
+  showDelay = 300,
+  hideDelay = 150,
+  className = ""
+}) => {
+  const [visible, setVisible] = useState(false);
+  const showTimeoutRef = useRef(void 0);
+  const hideTimeoutRef = useRef(void 0);
+  const tooltipId = useId();
+  const baseClass = "ds-tooltip";
+  const show = () => {
+    clearTimeout(hideTimeoutRef.current);
+    showTimeoutRef.current = setTimeout(() => setVisible(true), showDelay);
+  };
+  const hide = () => {
+    clearTimeout(showTimeoutRef.current);
+    hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
+  };
+  const trigger = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": tooltipId
+  }) : children;
+  const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+  const panelClasses = [
+    `${baseClass}__panel`,
+    `${baseClass}__panel--${position}`,
+    visible ? `${baseClass}__panel--visible` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: containerClasses,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        trigger,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: panelClasses,
+            role: "tooltip",
+            id: tooltipId,
+            "aria-hidden": !visible,
+            children: [
+              content,
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tooltip
+};

package/components/TypographySwatch/TypographySwatch.css

@@ -0,0 +1,81 @@
+/* ============================================
+   TYPOGRAPHY SWATCH COMPONENT
+   Card that displays a type style with a live
+   preview and four value columns.
+   ============================================ */
+
+.ds-typography-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xl); /* 40px */
+
+  /* Sizing */
+  width: 100%;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl); /* 24px */
+  padding: var(--padding-xl) var(--padding-lg) var(--padding-lg); /* 40px top, 20px sides/bottom */
+  overflow: hidden;
+}
+
+/* ============================================
+   PREVIEW TEXT
+   Rendered at the actual font properties via
+   inline style — inherits colour from tokens.
+   ============================================ */
+
+.ds-typography-swatch__preview {
+  color: var(--color-text-primary);
+  word-break: break-word;
+}
+
+/* ============================================
+   DIVIDER
+   ============================================ */
+
+.ds-typography-swatch__divider {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--color-bg-container-border);
+  margin: 0;
+}
+
+/* ============================================
+   VALUES ROW
+   Four equal columns showing the metrics.
+   ============================================ */
+
+.ds-typography-swatch__values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 100%;
+}
+
+.ds-typography-swatch__value-item {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.ds-typography-swatch__value-number {
+  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);
+}
+
+.ds-typography-swatch__value-label {
+  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);
+}

package/components/TypographySwatch/TypographySwatch.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface TypographySwatchProps {
+    /** Display name rendered as the preview text (e.g. "Mega 1") */
+    name: string;
+    /** Font weight label (e.g. "Light", "SemiBold", "Regular") */
+    weight: string;
+    /** Font size value (e.g. "132", "16") */
+    size: string;
+    /** Line height value (e.g. "85%", "44px") */
+    lineHeight: string;
+    /** Letter spacing value (e.g. "2%", "-1%", "0") */
+    letterSpacing: string;
+    /** Inline style object applied to the preview text for live rendering */
+    previewStyle?: React.CSSProperties;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TypographySwatch component from Figma design system.
+ * Displays a typography style in a card with a live preview
+ * of the text and four value columns showing font weight,
+ * size, line height, and letter spacing.
+ */
+export declare const TypographySwatch: ({ name, weight, size, lineHeight, letterSpacing, previewStyle, className, }: TypographySwatchProps) => React.JSX.Element;