@robr0/design-system 0.1.0

package/components/Chart/Treemap.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
+import "./Chart.css";
+const PALETTE = [
+  "#118AB2",
+  // teal-07
+  "#06D6A0",
+  // green-07
+  "#EF476F",
+  // red-07
+  "#FFD166",
+  // yellow-07
+  "#9E47EF",
+  // purple-07
+  "#1E47B0",
+  // blue-07
+  "#EF8247"
+  // orange
+];
+function getCSSVar(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function TreemapContent(props) {
+  const { x, y, width, height, name, index, color } = props;
+  if (width < 4 || height < 4) return null;
+  const fill = color || PALETTE[index % PALETTE.length];
+  const textColor = getCSSVar("--color-text-primary", "#050505");
+  const showLabel = width > 50 && height > 28;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 4,
+        ry: 4,
+        style: { fill, stroke: getCSSVar("--color-bg-container-primary", "#F1F1F1"), strokeWidth: 2 }
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        style: { fill: textColor, fontSize: 12, fontWeight: 600 },
+        children: name
+      }
+    )
+  ] });
+}
+function TreemapTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: entry.name }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: "Size" }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] })
+  ] });
+}
+const Treemap = ({
+  data,
+  dataKey = "size",
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(TreemapTooltip, { ...props }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsx(
+      Treemap$1,
+      {
+        data,
+        dataKey,
+        aspectRatio: 4 / 3,
+        content: /* @__PURE__ */ jsx(TreemapContent, {}),
+        children: /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip })
+      }
+    ) }) })
+  ] });
+};
+export {
+  Treemap
+};

package/components/Checkbox/Checkbox.css

@@ -0,0 +1,164 @@
+/* ============================================
+   CHECKBOX COMPONENT
+   Custom checkbox with check / indeterminate icon
+   ============================================ */
+
+.ds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ============================================
+   BOX
+   ============================================ */
+
+.ds-checkbox__box {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  border: var(--border-md) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm); /* 8px */
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-checkbox__icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-action-primary-text-active);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  display: block;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-checkbox__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);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   CHECKED STATE
+   ============================================ */
+
+.ds-checkbox--checked .ds-checkbox__box {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-checkbox--checked .ds-checkbox__icon {
+  opacity: 1;
+}
+
+/* ============================================
+   INDETERMINATE STATE
+   ============================================ */
+
+.ds-checkbox--indeterminate .ds-checkbox__box {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-checkbox--indeterminate .ds-checkbox__icon {
+  opacity: 1;
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-checkbox:not(.ds-checkbox--disabled):hover .ds-checkbox__box {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-checkbox--checked:not(.ds-checkbox--disabled):hover .ds-checkbox__box {
+  background-color: var(--color-action-primary-bg-hover);
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-checkbox:focus-visible .ds-checkbox__box {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-checkbox--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-checkbox--compact .ds-checkbox__box {
+  width: 20px;
+  height: 20px;
+}
+
+.ds-checkbox--compact .ds-checkbox__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.ds-checkbox--compact .ds-checkbox__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+/* ============================================
+   CHECKBOX GROUP
+   ============================================ */
+
+.ds-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+}
+
+.ds-checkbox-group__label {
+  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);
+  color: var(--color-text-primary);
+}
+
+.ds-checkbox-group__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+}
+
+.ds-checkbox-group--horizontal .ds-checkbox-group__items {
+  flex-direction: row;
+  gap: var(--gap-lg); /* 20px */
+}

package/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export interface CheckboxProps {
+    /** Label text */
+    label?: string;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Callback when toggled */
+    onChange?: (checked: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label override */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+export interface CheckboxGroupProps {
+    /** Group label */
+    label?: string;
+    /** Checkbox options */
+    items: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    /** Currently selected values */
+    values?: string[];
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Callback when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const CheckboxGroup: ({ label, items, values, direction, size, onChange, className, }: CheckboxGroupProps) => React.JSX.Element;
+export declare const Checkbox: ({ label, checked, indeterminate, disabled, size, onChange, className, ariaLabel, }: CheckboxProps) => React.JSX.Element;

package/components/Checkbox/Checkbox.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Checkbox.css";
+const CheckIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ds-checkbox__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 MinusIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ds-checkbox__icon",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2 7H12",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+const CheckboxGroup = ({
+  label,
+  items,
+  values = [],
+  direction = "vertical",
+  size = "default",
+  onChange,
+  className = ""
+}) => {
+  const baseClass = "ds-checkbox-group";
+  const directionClass = `${baseClass}--${direction}`;
+  const classes = [baseClass, directionClass, className].filter(Boolean).join(" ");
+  const handleToggle = (itemValue) => {
+    if (!onChange) return;
+    const next = values.includes(itemValue) ? values.filter((v) => v !== itemValue) : [...values, itemValue];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "group", "aria-label": label, children: [
+    label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        label: item.label,
+        checked: values.includes(item.value),
+        disabled: item.disabled,
+        size,
+        onChange: () => handleToggle(item.value)
+      },
+      item.value
+    )) })
+  ] });
+};
+const Checkbox = ({
+  label,
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  size = "default",
+  onChange,
+  className = "",
+  ariaLabel
+}) => {
+  const baseClass = "ds-checkbox";
+  const checkedClass = checked ? `${baseClass}--checked` : "";
+  const indeterminateClass = indeterminate && !checked ? `${baseClass}--indeterminate` : "";
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
+  const classes = [baseClass, sizeClass, checkedClass, indeterminateClass, disabledClass, className].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "checkbox",
+      "aria-checked": indeterminate && !checked ? "mixed" : checked,
+      "aria-disabled": disabled,
+      "aria-label": ariaLabel || label,
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+      ]
+    }
+  );
+};
+export {
+  Checkbox,
+  CheckboxGroup
+};

package/components/Chip/Chip.css

@@ -0,0 +1,195 @@
+/* ============================================
+   CHIP COMPONENT
+   Compact pill for attributes, filters, and
+   inline metadata. Non-clickable by default;
+   clickable, selectable, and removable variants.
+   ============================================ */
+
+.ds-chip {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+
+  /* Spacing — 32px tall at default size */
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+
+  /* Shape */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-page-primary);
+
+  /* Typography — same em style as Badge */
+  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);
+  white-space: nowrap;
+
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   SIZE — COMPACT (24px tall)
+   ============================================ */
+
+.ds-chip--compact {
+  gap: var(--gap-xs); /* 4px */
+  padding: var(--padding-xxxs) var(--padding-sm); /* 2px 8px */
+}
+
+/* ============================================
+   ICON (leading)
+   ============================================ */
+
+.ds-chip__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-icon-primary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-chip__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.ds-chip--compact .ds-chip__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-chip--compact .ds-chip__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-chip__label {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   CLICKABLE (rendered as <button>)
+   ============================================ */
+
+.ds-chip--clickable {
+  cursor: pointer;
+}
+
+.ds-chip--clickable:not(.ds-chip--disabled):not(.ds-chip--selected):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-chip--clickable:not(.ds-chip--disabled):not(.ds-chip--selected):active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* ============================================
+   SELECTED — teal active fill, matching the
+   SegmentedControl selection convention
+   ============================================ */
+
+.ds-chip--selected {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-chip--selected .ds-chip__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-chip--selected.ds-chip--clickable:not(.ds-chip--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-chip--selected.ds-chip--clickable:not(.ds-chip--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+/* ============================================
+   REMOVABLE — <span> container with an inner
+   main region (when clickable) + close button
+   ============================================ */
+
+.ds-chip__main {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.ds-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-full);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+.ds-chip--compact .ds-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-chip__remove:not(:disabled):hover {
+  color: var(--color-text-primary);
+}
+
+.ds-chip--selected .ds-chip__remove {
+  color: var(--color-action-primary-text);
+}
+
+.ds-chip--selected .ds-chip__remove:not(:disabled):hover {
+  color: var(--color-action-primary-text-active);
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-chip--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-chip--disabled .ds-chip__main,
+.ds-chip--disabled .ds-chip__remove {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-chip--clickable:focus-visible,
+.ds-chip__main:focus-visible,
+.ds-chip__remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/Chip/Chip.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface ChipProps {
+    /** Chip label — string for plain text, ReactNode for richer content (e.g. a numbered prefix) */
+    label: React.ReactNode;
+    /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Selected state (filter-style chips) — renders the teal active fill */
+    selected?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Chip size */
+    size?: 'default' | 'compact';
+    /** Click handler — presence makes the chip an interactive <button> */
+    onClick?: () => void;
+    /** Remove handler — renders a trailing close button (input-style chips) */
+    onRemove?: () => void;
+    /** Accessible label for the remove button */
+    removeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Chip component — compact pill for attributes, filters, and inline metadata.
+ * Non-clickable by default (renders a <span>); pass onClick for an
+ * interactive <button>, and/or onRemove for a trailing close button.
+ */
+export declare const Chip: ({ label, icon, selected, disabled, size, onClick, onRemove, removeLabel, className, }: ChipProps) => React.JSX.Element;