@robr0/design-system 0.1.0

package/components/Chip/Chip.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import "./Chip.css";
+import "../../fonts/material-symbols.css";
+const Chip = ({
+  label,
+  icon,
+  selected,
+  disabled = false,
+  size = "default",
+  onClick,
+  onRemove,
+  removeLabel = "Remove",
+  className = ""
+}) => {
+  const baseClass = "ds-chip";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    selected && `${baseClass}--selected`,
+    disabled && `${baseClass}--disabled`,
+    onClick && !onRemove && `${baseClass}--clickable`,
+    onRemove && `${baseClass}--removable`,
+    className
+  ].filter(Boolean).join(" ");
+  const renderIcon = (iconProp) => {
+    if (typeof iconProp === "string") {
+      return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: iconProp });
+    }
+    return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: iconProp });
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && renderIcon(icon),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+  ] });
+  const ariaPressed = typeof selected === "boolean" ? selected : void 0;
+  if (onRemove) {
+    return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+      onClick ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__main`,
+          onClick,
+          disabled,
+          "aria-pressed": ariaPressed,
+          children: content
+        }
+      ) : content,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__remove`,
+          onClick: onRemove,
+          disabled,
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        onClick,
+        disabled,
+        "aria-pressed": ariaPressed,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: classes, children: content });
+};
+export {
+  Chip
+};

package/components/CircularButton/CircularButton.css

@@ -0,0 +1,206 @@
+/* ============================================
+   CIRCULAR BUTTON (ICON BUTTON)
+   Round button with a single icon
+   ============================================ */
+
+.ds-circular-button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Size — default */
+  width: 40px;
+  height: 40px;
+
+  /* Shape */
+  border-radius: var(--radius-full); /* 999px — perfect circle */
+
+  /* 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;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* ============================================
+   SIZE — DEFAULT
+   ============================================ */
+
+.ds-circular-button--default {
+  width: 40px;
+  height: 40px;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-circular-button--compact {
+  width: 32px;
+  height: 32px;
+}
+
+.ds-circular-button--compact .ds-circular-button__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-circular-button__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+}
+
+/* ============================================
+   PRIMARY VARIANT (SOLID)
+   ============================================ */
+
+.ds-circular-button--primary {
+  background-color: var(--color-action-primary-bg);
+  border: none;
+}
+
+.ds-circular-button--primary .ds-circular-button__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-circular-button--primary.ds-circular-button--hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--primary.ds-circular-button--hover .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-circular-button--primary.ds-circular-button--active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--primary.ds-circular-button--active .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-circular-button--primary.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--primary:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--primary:not(.ds-circular-button--disabled):hover .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-circular-button--primary:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--primary:not(.ds-circular-button--disabled):active .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+/* ============================================
+   SECONDARY VARIANT (OUTLINED)
+   ============================================ */
+
+.ds-circular-button--secondary {
+  border: var(--border-xs) solid var(--color-action-primary-border);
+  background-color: transparent;
+}
+
+.ds-circular-button--secondary .ds-circular-button__icon {
+  color: var(--color-action-icon-default);
+}
+
+.ds-circular-button--secondary.ds-circular-button--hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--secondary.ds-circular-button--hover .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-circular-button--secondary.ds-circular-button--active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--secondary.ds-circular-button--active .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-circular-button--secondary.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):hover .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):active .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+/* ============================================
+   TERTIARY VARIANT (PASSIVE / GHOST)
+   ============================================ */
+
+.ds-circular-button--tertiary {
+  background-color: var(--color-action-passive-bg);
+  border: none;
+}
+
+.ds-circular-button--tertiary .ds-circular-button__icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-circular-button--tertiary.ds-circular-button--hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-circular-button--tertiary.ds-circular-button--active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-circular-button--tertiary.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--tertiary:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-circular-button--tertiary:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-circular-button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/CircularButton/CircularButton.d.ts

@@ -0,0 +1,30 @@
+export interface CircularButtonProps {
+    /** Material Symbol icon name */
+    icon: string;
+    /** Button priority/variant */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Button state */
+    state?: 'default' | 'hover' | 'active' | 'disabled';
+    /** Button size */
+    size?: 'default' | 'compact';
+    /** Accessible label */
+    ariaLabel: string;
+    /** 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;
+    /** Id of an element describing this button — set automatically by Tooltip */
+    'aria-describedby'?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Circular icon button component.
+ * A round button containing a single icon, available in
+ * primary and secondary variants with default and compact sizes.
+ */
+export declare const CircularButton: ({ icon, priority, state, size, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;

package/components/CircularButton/CircularButton.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import "./CircularButton.css";
+import "../../fonts/material-symbols.css";
+const CircularButton = ({
+  icon,
+  priority = "primary",
+  state = "default",
+  size = "default",
+  ariaLabel,
+  onClick,
+  href,
+  target,
+  rel,
+  "aria-describedby": ariaDescribedby,
+  className = ""
+}) => {
+  const baseClass = "ds-circular-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 children = /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
+  if (href && !isDisabled) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: classes,
+        href,
+        target,
+        rel,
+        onClick,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedby,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      disabled: isDisabled,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
+      children
+    }
+  );
+};
+export {
+  CircularButton
+};

package/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,180 @@
+/* ============================================
+   CODE BLOCK COMPONENT
+   Monospace code with an optional header row
+   (filename, language) and a copy button.
+   Note: the system typeface is Nunito Sans;
+   code is the one sanctioned monospace context.
+   ============================================ */
+
+.ds-code-block {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+  max-height: var(--ds-code-block-max-height, none);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding: var(--padding-xs) var(--padding-sm) var(--padding-xs) var(--padding-md);
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
+  flex-shrink: 0;
+  transition: border-bottom-color var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* Collapsed: keep the header's height but hide its divider so it
+   doesn't double up with the root border */
+.ds-code-block--collapsed .ds-code-block__header {
+  border-bottom-color: transparent;
+}
+
+.ds-code-block__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  min-width: 0;
+}
+
+.ds-code-block__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: var(--padding-xxxs);
+  border: none;
+  border-radius: var(--radius-full);
+  background: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-code-block__toggle .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-code-block--collapsed .ds-code-block__toggle .material-symbols-rounded {
+  transform: rotate(-90deg);
+}
+
+.ds-code-block__toggle:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-code-block__toggle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-code-block__filename {
+  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-code-block__language {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   COPY BUTTON
+   ============================================ */
+
+.ds-code-block__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  margin: 0;
+  padding: var(--padding-xxxs) var(--padding-sm);
+  border: none;
+  border-radius: var(--radius-full);
+  background: none;
+  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);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-code-block__copy .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+.ds-code-block__copy:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-code-block__copy:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   CODE AREA
+   ============================================ */
+
+/* Same collapse technique as Accordion: animate the grid track
+   between 0fr and 1fr so height animates without measuring */
+.ds-code-block__panel {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard);
+  min-height: 0;
+}
+
+.ds-code-block--collapsed .ds-code-block__panel {
+  grid-template-rows: 0fr;
+}
+
+.ds-code-block__panel-inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ds-code-block__pre {
+  margin: 0;
+  padding: var(--padding-md);
+  overflow: auto;
+  /* Allow the pre to shrink below its content height so a
+     max-height on the root scrolls here, not past the header */
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ds-code-block__code {
+  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  white-space: pre;
+}

package/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,23 @@
+export interface CodeBlockProps {
+    /** The code to display, as a plain string */
+    code: string;
+    /** Language tag shown in the header, e.g. "tsx", "css" */
+    language?: string;
+    /** Filename shown in the header, e.g. "tokens-light.css" */
+    filename?: string;
+    /** Show the copy-to-clipboard button */
+    showCopy?: boolean;
+    /** Max height of the block; code scrolls vertically inside while the header stays pinned. Numbers are px. */
+    maxHeight?: number | string;
+    /** Show a chevron beside the filename that collapses/expands the code area */
+    collapsible?: boolean;
+    /** Start collapsed (only applies when collapsible) */
+    defaultCollapsed?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CodeBlock component — monospace code with an optional header row
+ * (filename, language tag) and a copy-to-clipboard button.
+ */
+export declare const CodeBlock: ({ code, language, filename, showCopy, maxHeight, collapsible, defaultCollapsed, className, }: CodeBlockProps) => import("react").JSX.Element;

package/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import "./CodeBlock.css";
+import "../../fonts/material-symbols.css";
+const CodeBlock = ({
+  code,
+  language,
+  filename,
+  showCopy = true,
+  maxHeight,
+  collapsible = false,
+  defaultCollapsed = false,
+  className = ""
+}) => {
+  const baseClass = "ds-code-block";
+  const [copied, setCopied] = useState(false);
+  const [collapsed, setCollapsed] = useState(collapsible && defaultCollapsed);
+  const panelId = useId();
+  const classes = [
+    baseClass,
+    collapsed ? `${baseClass}--collapsed` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const style = maxHeight !== void 0 ? {
+    "--ds-code-block-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+  } : void 0;
+  const hasHeader = Boolean(filename || language || showCopy || collapsible);
+  const copy = () => {
+    const fallback = () => {
+      const textarea = document.createElement("textarea");
+      textarea.value = code;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "absolute";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    };
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(code).catch(fallback);
+    } else {
+      fallback();
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__meta`, children: [
+        collapsible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${baseClass}__toggle`,
+            onClick: () => setCollapsed((c) => !c),
+            "aria-expanded": !collapsed,
+            "aria-controls": panelId,
+            "aria-label": collapsed ? "Expand code" : "Collapse code",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "expand_more" })
+          }
+        ),
+        filename && /* @__PURE__ */ jsx("code", { className: `${baseClass}__filename`, children: filename }),
+        language && /* @__PURE__ */ jsx("span", { className: `${baseClass}__language`, children: language })
+      ] }),
+      showCopy && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__copy`,
+          onClick: copy,
+          "aria-label": copied ? "Copied" : "Copy code",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: copied ? "check" : "content_copy" }),
+            copied ? "Copied" : "Copy"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { id: panelId, className: `${baseClass}__panel`, "aria-hidden": collapsed || void 0, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel-inner`, children: /* @__PURE__ */ jsx("pre", { className: `${baseClass}__pre`, children: /* @__PURE__ */ jsx("code", { className: `${baseClass}__code`, children: code }) }) }) })
+  ] });
+};
+export {
+  CodeBlock
+};