@robr0/design-system 0.1.0

package/components/ContributionGraph/ContributionGraph.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./ContributionGraph.css";
+const MONTH_LABELS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+const parseDay = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00`);
+const formatTooltip = (day) => {
+  const formatted = parseDay(day.date).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+  if (day.count === 0) return `No contributions on ${formatted}`;
+  if (day.count === 1) return `1 contribution on ${formatted}`;
+  return `${day.count} contributions on ${formatted}`;
+};
+const buildWeeks = (days) => {
+  const weeks = [];
+  let week = [];
+  days.forEach((day, index) => {
+    if (index === 0) {
+      week = Array(parseDay(day.date).getDay()).fill(null);
+    }
+    week.push(day);
+    if (week.length === 7) {
+      weeks.push(week);
+      week = [];
+    }
+  });
+  if (week.length > 0) weeks.push(week);
+  return weeks;
+};
+const buildMonthLabels = (weeks) => {
+  const labels = [];
+  let previousMonth = -1;
+  weeks.forEach((week, weekIndex) => {
+    const firstDay = week.find((day) => day !== null);
+    if (!firstDay) return;
+    const month = parseDay(firstDay.date).getMonth();
+    if (month !== previousMonth) {
+      if (weekIndex < weeks.length - 2 || labels.length === 0) {
+        labels.push({ weekIndex, label: MONTH_LABELS[month] });
+      }
+      previousMonth = month;
+    }
+  });
+  if (labels.length > 1 && labels[1].weekIndex - labels[0].weekIndex < 3) {
+    labels.shift();
+  }
+  return labels;
+};
+const ContributionGraph = ({
+  days,
+  caption,
+  showMonthLabels = true,
+  showLegend = true,
+  className = ""
+}) => {
+  const weeks = buildWeeks(days);
+  const monthLabels = buildMonthLabels(weeks);
+  const classes = ["ds-contribution-graph", className].filter(Boolean).join(" ");
+  const columnTemplate = `repeat(${weeks.length}, minmax(var(--ds-contribution-cell), 1fr))`;
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__scroll", children: [
+      showMonthLabels && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ds-contribution-graph__months",
+          style: { gridTemplateColumns: columnTemplate },
+          "aria-hidden": "true",
+          children: monthLabels.map(({ weekIndex, label }) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ds-contribution-graph__month-label",
+              style: { gridColumnStart: weekIndex + 1 },
+              children: label
+            },
+            `${label}-${weekIndex}`
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ds-contribution-graph__grid",
+          style: { gridTemplateColumns: columnTemplate },
+          role: "img",
+          "aria-label": caption ?? "Contribution activity",
+          children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__week", children: week.map(
+            (day, dayIndex) => day ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
+                title: formatTooltip(day)
+              },
+              day.date
+            ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
+          ) }, weekIndex))
+        }
+      )
+    ] }),
+    (caption || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__footer", children: [
+      caption && /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__caption", children: caption }),
+      showLegend && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__legend", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "Less" }),
+        [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx("div", { className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${level}` }, level)),
+        /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "More" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  ContributionGraph
+};

package/components/DateInput/DateInput.css

@@ -0,0 +1,163 @@
+/* ============================================
+   DATE INPUT COMPONENT
+   Date input with calendar icon and label
+   ============================================ */
+
+.ds-date-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-date-input__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-date-input__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   FIELD WRAPPER
+   ============================================ */
+
+.ds-date-input__field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-date-input__icon {
+  position: absolute;
+  left: var(--padding-md); /* 16px */
+  top: 50%;
+  transform: translateY(-50%);
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  pointer-events: none;
+}
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-date-input__field {
+  width: 100%;
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  padding-left: calc(var(--padding-md) + 24px + var(--gap-sm)); /* 16px + 24px icon + 8px gap */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-input-bg-primary);
+
+  /* Typography */
+  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-input-text-primary);
+
+  /* Transitions */
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+/* Hide the default calendar icon in WebKit browsers */
+.ds-date-input__field::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.ds-date-input__field:hover:not(:focus):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-date-input__field:focus {
+  border-color: var(--color-input-border-selected);
+  background-color: var(--color-input-bg-primary);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-date-input--compact .ds-date-input__field {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+  padding-left: calc(var(--padding-sm-md) + 20px + var(--gap-sm)); /* 12px + 20px icon + 8px gap */
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-date-input--compact .ds-date-input__icon {
+  left: var(--padding-sm-md); /* 12px */
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-date-input--compact .ds-date-input__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+.ds-date-input__helper {
+  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;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-date-input--error .ds-date-input__field {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-date-input--error .ds-date-input__field:focus {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-date-input--error .ds-date-input__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-date-input--disabled .ds-date-input__label {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-date-input--disabled .ds-date-input__field {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  color: var(--color-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.ds-date-input--disabled .ds-date-input__icon {
+  color: var(--color-input-text-disabled);
+}

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export interface DateInputProps {
+    /** Input label text */
+    label?: string;
+    /** Current value (YYYY-MM-DD format) */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Helper or error message */
+    helperText?: string;
+    /** Minimum selectable date (YYYY-MM-DD) */
+    min?: string;
+    /** Maximum selectable date (YYYY-MM-DD) */
+    max?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Callback on focus */
+    onFocus?: () => void;
+    /** Callback on blur */
+    onBlur?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible name override */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+/**
+ * Date input component with native date picker.
+ * Uses the browser's built-in date input with custom styling,
+ * calendar icon, label, and validation states.
+ */
+export declare const DateInput: ({ label, value, placeholder, size, disabled, required, error, helperText, min, max, onChange, onFocus, onBlur, className, ariaLabel, name, id, }: DateInputProps) => React.JSX.Element;

package/components/DateInput/DateInput.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./DateInput.css";
+import "../../fonts/material-symbols.css";
+const DateInput = ({
+  label,
+  value,
+  placeholder,
+  size = "default",
+  disabled = false,
+  required = false,
+  error = false,
+  helperText,
+  min,
+  max,
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  ariaLabel,
+  name,
+  id
+}) => {
+  const baseClass = "ds-date-input";
+  const errorClass = error ? `${baseClass}--error` : "";
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const sizeClass = `${baseClass}--${size}`;
+  const classes = [baseClass, sizeClass, errorClass, disabledClass, className].filter(Boolean).join(" ");
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: "calendar_today" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: `${baseClass}__field`,
+          type: "date",
+          id: inputId,
+          name,
+          value,
+          placeholder,
+          disabled,
+          required,
+          min,
+          max,
+          "aria-label": ariaLabel || label,
+          "aria-invalid": error,
+          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+          onChange: handleChange,
+          onFocus,
+          onBlur
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+  ] });
+};
+export {
+  DateInput
+};

package/components/DatePicker/DatePicker.css

@@ -0,0 +1,198 @@
+/* ============================================
+   DATE PICKER COMPONENT
+   Inline calendar with month navigation
+   ============================================ */
+
+.ds-date-picker {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  padding: var(--padding-md); /* 16px */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-input-bg-primary);
+  user-select: none;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm); /* 8px */
+}
+
+.ds-date-picker__month-year {
+  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);
+  text-align: center;
+  flex: 1;
+}
+
+.ds-date-picker__nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  color: var(--color-text-secondary);
+  font-size: 24px;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-date-picker__nav-btn:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-date-picker__nav-btn:active:not(:disabled) {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-date-picker__nav-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-date-picker__nav-btn:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   GRID
+   ============================================ */
+
+.ds-date-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--gap-xxs); /* 2px */
+}
+
+/* ============================================
+   DAY HEADERS
+   ============================================ */
+
+.ds-date-picker__day-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-title-body-weight); /* 600 — semibold for headers */
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   CELLS
+   ============================================ */
+
+.ds-date-picker__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Typography — paragraph sm em for clickable cells */
+  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: 1;
+  color: var(--color-text-primary);
+}
+
+.ds-date-picker__cell:hover:not(:disabled):not(.ds-date-picker__cell--selected) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-date-picker__cell:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Outside current month */
+.ds-date-picker__cell--outside {
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+
+/* Today indicator */
+.ds-date-picker__cell--today {
+  border: var(--border-xs) solid var(--color-action-primary-bg);
+}
+
+/* Selected */
+.ds-date-picker__cell--selected {
+  background-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-date-picker__cell--selected:hover:not(:disabled) {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* Disabled */
+.ds-date-picker__cell--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-date-picker--compact {
+  padding: var(--padding-sm); /* 8px */
+  gap: var(--gap-xxs); /* 2px */
+}
+
+.ds-date-picker--compact .ds-date-picker__month-year {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}
+
+.ds-date-picker--compact .ds-date-picker__nav-btn {
+  width: 28px;
+  height: 28px;
+  font-size: 20px;
+}
+
+.ds-date-picker--compact .ds-date-picker__day-header {
+  height: 28px;
+  font-size: 12px;
+}
+
+.ds-date-picker--compact .ds-date-picker__cell {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-date-picker--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,22 @@
+export interface DatePickerProps {
+    /** Currently selected date (YYYY-MM-DD) */
+    value?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Minimum selectable date (YYYY-MM-DD) */
+    min?: string;
+    /** Maximum selectable date (YYYY-MM-DD) */
+    max?: string;
+    /** Callback when a date is selected */
+    onDateSelect?: (date: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Inline date picker calendar component.
+ * Displays a full month grid with navigation,
+ * day headers, and selectable date cells.
+ */
+export declare const DatePicker: ({ value, size, disabled, min, max, onDateSelect, className, }: DatePickerProps) => import("react").JSX.Element;