rift-ds 1.0.0

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by DateInput itself — everything else falls through to the <input>. */
+type DateInputOwnProps = {
+    /** Input label text */
+    label?: string;
+    /** Current value (YYYY-MM-DD format) */
+    value?: string;
+    /** Component size (not the native character-width `size` attribute) */
+    size?: 'default' | 'compact';
+    /** 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;
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
+    className?: string;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+};
+export interface DateInputProps extends DateInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof DateInputOwnProps | 'type'> {
+}
+/**
+ * Date input component with native date picker.
+ * Uses the browser's built-in date input with custom styling,
+ * calendar icon, label, and validation states.
+ *
+ * Forwards a ref to the underlying `<input type="date">` and spreads
+ * unrecognised props onto it.
+ */
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/DateInput/DateInput.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Field } from "../Field/Field.js";
+import "./DateInput.css";
+import "../../fonts/material-symbols.css";
+const DateInput = React.forwardRef(
+  ({
+    label,
+    value,
+    placeholder,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    min,
+    max,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-date-input";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        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",
+            {
+              ...rest,
+              ref,
+              className: `${baseClass}__field`,
+              type: "date",
+              id: inputId,
+              name,
+              value,
+              placeholder,
+              disabled,
+              required,
+              min,
+              max,
+              "aria-label": ariaLabel || rest["aria-label"] || label,
+              "aria-invalid": error,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              onChange: handleChange
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+DateInput.displayName = "DateInput";
+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-200); /* 8px */
+  padding: var(--padding-400); /* 16px */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 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-200); /* 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-pill);
+  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-050); /* 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-pill);
+  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-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-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-025) 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-200); /* 8px */
+  gap: var(--gap-050); /* 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,29 @@
+import { default as React } from 'react';
+/** Props owned by DatePicker itself — everything else falls through to the wrapper. */
+type DatePickerOwnProps = {
+    /** 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;
+};
+export interface DatePickerProps extends DatePickerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DatePickerOwnProps> {
+}
+/**
+ * Inline date picker calendar component.
+ * Displays a full month grid with navigation,
+ * day headers, and selectable date cells.
+ *
+ * Forwards a ref to the wrapping element and spreads unrecognised props onto it.
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/DatePicker/DatePicker.js

@@ -0,0 +1,196 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { 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}`;
+}
+const visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+const DatePicker = React.forwardRef(
+  ({ value, size = "default", disabled = false, min, max, onDateSelect, className = "", ...rest }, ref) => {
+    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 classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled ? `${baseClass}--disabled` : "",
+      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", { ...rest, ref, 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("span", { "aria-live": "polite", style: visuallyHidden, children: [
+        MONTHS[viewMonth],
+        " ",
+        viewYear
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${baseClass}__grid`,
+          role: "group",
+          "aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+          children: [
+            DAYS.map((day) => (
+              // Each cell's aria-label already carries the full weekday name, so
+              // the visual column headers are redundant noise for a screen reader.
+              /* @__PURE__ */ jsx("div", { className: `${baseClass}__day-header`, "aria-hidden": "true", 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"
+                  })}${isSelected ? ", selected" : ""}`,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: cell.day
+                },
+                idx
+              );
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};