@robr0/design-system 0.1.0

package/components/DatePicker/DatePicker.js

@@ -0,0 +1,170 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import "./DatePicker.css";
+import "../../fonts/material-symbols.css";
+const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function parseDate(str) {
+  if (!str) return null;
+  const [y, m, d] = str.split("-").map(Number);
+  return new Date(y, m - 1, d);
+}
+function formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+const DatePicker = ({
+  value,
+  size = "default",
+  disabled = false,
+  min,
+  max,
+  onDateSelect,
+  className = ""
+}) => {
+  const selectedDate = parseDate(value);
+  const minDate = parseDate(min);
+  const maxDate = parseDate(max);
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const [viewMonth, setViewMonth] = useState(
+    selectedDate ? selectedDate.getMonth() : today.getMonth()
+  );
+  const [viewYear, setViewYear] = useState(
+    selectedDate ? selectedDate.getFullYear() : today.getFullYear()
+  );
+  const baseClass = "ds-date-picker";
+  const sizeClass = `${baseClass}--${size}`;
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const classes = [baseClass, sizeClass, disabledClass, className].filter(Boolean).join(" ");
+  const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const daysInPrevMonth = new Date(viewYear, viewMonth, 0).getDate();
+  const cells = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const d = daysInPrevMonth - i;
+    cells.push({ day: d, inMonth: false, date: new Date(viewYear, viewMonth - 1, d) });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, inMonth: true, date: new Date(viewYear, viewMonth, d) });
+  }
+  const remaining = 42 - cells.length;
+  for (let d = 1; d <= remaining; d++) {
+    cells.push({ day: d, inMonth: false, date: new Date(viewYear, viewMonth + 1, d) });
+  }
+  const goToPrevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear(viewYear - 1);
+    } else {
+      setViewMonth(viewMonth - 1);
+    }
+  };
+  const goToNextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear(viewYear + 1);
+    } else {
+      setViewMonth(viewMonth + 1);
+    }
+  };
+  const isDateDisabled = (date) => {
+    if (disabled) return true;
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleSelect = (cell) => {
+    if (isDateDisabled(cell.date)) return;
+    if (!cell.inMonth) {
+      setViewMonth(cell.date.getMonth());
+      setViewYear(cell.date.getFullYear());
+    }
+    onDateSelect?.(formatDate(cell.date));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__nav-btn material-symbols-rounded`,
+          onClick: goToPrevMonth,
+          disabled,
+          "aria-label": "Previous month",
+          children: "chevron_left"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__month-year`, children: [
+        MONTHS[viewMonth],
+        " ",
+        viewYear
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__nav-btn material-symbols-rounded`,
+          onClick: goToNextMonth,
+          disabled,
+          "aria-label": "Next month",
+          children: "chevron_right"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__grid`, role: "grid", children: [
+      DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: `${baseClass}__day-header`, role: "columnheader", children: day }, day)),
+      cells.map((cell, idx) => {
+        const isSelected = selectedDate && isSameDay(cell.date, selectedDate);
+        const isToday = isSameDay(cell.date, today);
+        const isCellDisabled = isDateDisabled(cell.date);
+        const cellClasses = [
+          `${baseClass}__cell`,
+          !cell.inMonth ? `${baseClass}__cell--outside` : "",
+          isSelected ? `${baseClass}__cell--selected` : "",
+          isToday && !isSelected ? `${baseClass}__cell--today` : "",
+          isCellDisabled ? `${baseClass}__cell--disabled` : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cellClasses,
+            onClick: () => handleSelect(cell),
+            disabled: isCellDisabled,
+            "aria-label": cell.date.toLocaleDateString(void 0, {
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            }),
+            "aria-selected": isSelected || void 0,
+            role: "gridcell",
+            children: cell.day
+          },
+          idx
+        );
+      })
+    ] })
+  ] });
+};
+export {
+  DatePicker
+};

package/components/Dialog/Dialog.css

@@ -0,0 +1,176 @@
+/* ============================================
+   DIALOG COMPONENT
+   General-purpose modal with backdrop overlay
+   ============================================ */
+
+.ds-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-dialog--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.ds-dialog__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-dialog__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md); /* 16px */
+  width: 100%;
+  max-height: calc(100vh - var(--gap-xl) * 2); /* breathing room top/bottom */
+  padding: var(--padding-lg); /* 20px */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-modal);
+  transform: scale(0.96);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+.ds-dialog--open .ds-dialog__panel {
+  transform: scale(1);
+}
+
+/* Sizes */
+.ds-dialog--sm .ds-dialog__panel {
+  max-width: 400px;
+}
+
+.ds-dialog--md .ds-dialog__panel {
+  max-width: 560px;
+}
+
+.ds-dialog--lg .ds-dialog__panel {
+  max-width: 720px;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-md); /* 16px */
+}
+
+.ds-dialog__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs); /* 4px */
+  min-width: 0;
+}
+
+.ds-dialog__title {
+  font-family: var(--font-heading-6-family);
+  font-size: var(--font-heading-6-size);
+  font-weight: var(--font-heading-6-weight);
+  line-height: var(--font-heading-6-line-height);
+  letter-spacing: var(--font-heading-6-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ds-dialog__description {
+  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;
+}
+
+/* Close button — ghost icon button */
+.ds-dialog__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full); /* pill */
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-dialog__close:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-dialog__close:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-dialog__close-icon {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   BODY
+   Scrolls when content exceeds the panel height
+   ============================================ */
+
+.ds-dialog__body {
+  overflow-y: auto;
+  min-height: 0;
+  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-secondary);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gap-sm); /* 8px */
+  padding-top: var(--padding-xs); /* 6px */
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-dialog__panel {
+    margin: var(--padding-md);
+  }
+}

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface DialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when dialog requests to close */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog title */
+    title: string;
+    /** Optional subtitle under the title */
+    description?: string;
+    /** Dialog body content */
+    children?: React.ReactNode;
+    /** Optional footer slot — typically a row of Buttons */
+    footer?: React.ReactNode;
+    /** Panel width */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether ESC, backdrop click, and the close button can dismiss */
+    dismissible?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Dialog component — a general-purpose modal with arbitrary
+ * content and an optional footer. Traps focus, restores it on
+ * close, locks body scroll, and supports ESC / backdrop / close
+ * button dismissal. For confirm/cancel prompts use AlertDialog.
+ */
+export declare const Dialog: ({ open, onOpenChange, title, description, children, footer, size, dismissible, className, }: DialogProps) => React.ReactPortal | null;

package/components/Dialog/Dialog.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import ReactDOM from "react-dom";
+import "./Dialog.css";
+import "../../fonts/material-symbols.css";
+const emptySubscribe = () => () => {
+};
+const Dialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  dismissible = true,
+  className = ""
+}) => {
+  const panelRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const titleId = useId();
+  const descId = useId();
+  const baseClass = "ds-dialog";
+  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    if (panel) {
+      const first = panel.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      (first ?? panel).focus();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && dismissible) {
+        onOpenChange(false);
+        return;
+      }
+      if (e.key === "Tab" && panel) {
+        const focusable = panel.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, dismissible, onOpenChange]);
+  useEffect(() => {
+    if (!open && previousFocusRef.current) {
+      previousFocusRef.current.focus();
+      previousFocusRef.current = null;
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  const handleBackdropClick = () => {
+    if (dismissible) onOpenChange(false);
+  };
+  const openClass = open ? `${baseClass}--open` : "";
+  const sizeClass = `${baseClass}--${size}`;
+  const containerClasses = [baseClass, sizeClass, openClass, className].filter(Boolean).join(" ");
+  const dialog = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleBackdropClick }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__panel`,
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": description ? descId : void 0,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+              /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
+            ] }),
+            dismissible && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__close`,
+                onClick: () => onOpenChange(false),
+                "aria-label": "Close dialog",
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__close-icon material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "close"
+                  }
+                )
+              }
+            )
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
+          footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+        ]
+      }
+    )
+  ] });
+  if (!mounted) return null;
+  return ReactDOM.createPortal(dialog, document.body);
+};
+export {
+  Dialog
+};

package/components/Divider/Divider.css

@@ -0,0 +1,100 @@
+/* ============================================
+   DIVIDER COMPONENT
+   Thin rule separating stacked content
+   ============================================ */
+
+/* Base — plain horizontal <hr> */
+.ds-divider {
+  border: none;
+  margin: 0;
+  border-top: var(--border-xs) solid var(--color-divider);
+  width: 100%;
+}
+
+/* ============================================
+   SPACING
+   Block margin for horizontal, inline for vertical
+   ============================================ */
+
+.ds-divider--spacing-none {
+  margin-block: 0;
+}
+
+.ds-divider--spacing-sm {
+  margin-block: var(--gap-sm); /* 8px */
+}
+
+.ds-divider--spacing-md {
+  margin-block: var(--gap-md); /* 16px */
+}
+
+.ds-divider--spacing-lg {
+  margin-block: var(--gap-lg); /* 20px */
+}
+
+/* ============================================
+   LABELED
+   Text label inline with the rule
+   ============================================ */
+
+.ds-divider--labeled {
+  border-top: none;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm-md); /* 12px */
+}
+
+.ds-divider--labeled::before,
+.ds-divider--labeled::after {
+  content: '';
+  flex: 1;
+  height: var(--border-xs);
+  background-color: var(--color-divider);
+}
+
+/* Label at the start — no leading segment */
+.ds-divider--label-start::before {
+  display: none;
+}
+
+.ds-divider__label {
+  flex-shrink: 0;
+  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-secondary);
+}
+
+/* ============================================
+   VERTICAL
+   Stretches to container height inside flex rows
+   ============================================ */
+
+.ds-divider--vertical {
+  border-top: none;
+  width: var(--border-xs);
+  align-self: stretch;
+  background-color: var(--color-divider);
+}
+
+.ds-divider--vertical.ds-divider--spacing-none {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.ds-divider--vertical.ds-divider--spacing-sm {
+  margin-block: 0;
+  margin-inline: var(--gap-sm); /* 8px */
+}
+
+.ds-divider--vertical.ds-divider--spacing-md {
+  margin-block: 0;
+  margin-inline: var(--gap-md); /* 16px */
+}
+
+.ds-divider--vertical.ds-divider--spacing-lg {
+  margin-block: 0;
+  margin-inline: var(--gap-lg); /* 20px */
+}

package/components/Divider/Divider.d.ts

@@ -0,0 +1,18 @@
+export interface DividerProps {
+    /** Divider direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label rendered inline in the line (horizontal only) */
+    label?: string;
+    /** Label placement along the line */
+    labelPosition?: 'start' | 'center';
+    /** Margin around the divider (block for horizontal, inline for vertical) */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Divider component — a thin rule separating stacked content.
+ * Plain horizontal by default; supports an inline text label
+ * and a vertical orientation for use inside flex rows.
+ */
+export declare const Divider: ({ orientation, label, labelPosition, spacing, className, }: DividerProps) => import("react").JSX.Element;

package/components/Divider/Divider.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import "./Divider.css";
+const Divider = ({
+  orientation = "horizontal",
+  label,
+  labelPosition = "center",
+  spacing = "md",
+  className = ""
+}) => {
+  const baseClass = "ds-divider";
+  const spacingClass = `${baseClass}--spacing-${spacing}`;
+  if (orientation === "vertical") {
+    const classes2 = [baseClass, `${baseClass}--vertical`, spacingClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: classes2, role: "separator", "aria-orientation": "vertical" });
+  }
+  if (label) {
+    const classes2 = [
+      baseClass,
+      `${baseClass}--labeled`,
+      `${baseClass}--label-${labelPosition}`,
+      spacingClass,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: classes2, role: "separator", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }) });
+  }
+  const classes = [baseClass, spacingClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("hr", { className: classes });
+};
+export {
+  Divider
+};