rift-ds 1.0.0

package/components/ContributionGraph/ContributionGraph.js

@@ -0,0 +1,149 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../Chart/Chart.css";
+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,
+  title,
+  subtitle,
+  bare = false,
+  caption,
+  showMonthLabels = true,
+  showLegend = true,
+  className = ""
+}) => {
+  const weeks = buildWeeks(days);
+  const monthLabels = buildMonthLabels(weeks);
+  const chartClass = "ds-chart";
+  const classes = [
+    chartClass,
+    bare && `${chartClass}--bare`,
+    "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: [
+    (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${chartClass}__body ds-contribution-graph__content`, 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",
+                style: { "--ds-contribution-week": weekIndex },
+                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/DataTable/DataTable.css

@@ -0,0 +1,109 @@
+/* ============================================
+   DATA TABLE COMPONENT
+   The wired table block: toolbar with search
+   and filter slot, sortable headers, selection,
+   pagination footer. Row and cell styling all
+   comes from the underlying Table — this file
+   only styles the chrome around it.
+   ============================================ */
+
+.ds-data-table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  width: 100%;
+}
+
+/* ============================================
+   TOOLBAR
+   ============================================ */
+
+.ds-data-table__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200);
+  flex-wrap: wrap;
+}
+
+.ds-data-table__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  flex-wrap: wrap;
+}
+
+/* The search field sits at the end of the toolbar even with no filters.
+   It flexes from a fixed-feeling width instead of pinning one: on a roomy
+   row it reads as the familiar 240px field, and when the toolbar wraps it
+   grows across its own line rather than orphaning right over dead space. */
+.ds-data-table__search {
+  margin-left: auto;
+  flex: 1 1 200px;
+  max-width: 320px;
+}
+
+/* ============================================
+   SORTABLE HEADERS
+   The button fills the header cell so the whole
+   label is the click target.
+   ============================================ */
+
+.ds-data-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-data-table__sort:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-050);
+}
+
+.ds-data-table__sort-icon {
+  --icon-size: var(--icon-size-500);
+
+  color: var(--color-icon-secondary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-data-table__sort:hover .ds-data-table__sort-icon,
+.ds-data-table__sort:focus-visible .ds-data-table__sort-icon,
+.ds-data-table__sort-icon--active {
+  opacity: 1;
+}
+
+.ds-data-table__sort-icon--active {
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-data-table__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200);
+  flex-wrap: wrap;
+}
+
+.ds-data-table__count {
+  color: var(--color-text-tertiary);
+  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);
+  font-variant-numeric: tabular-nums;
+}

package/components/DataTable/DataTable.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+export interface DataTableColumn {
+    /** Unique column identifier, used as the key into each row's values. */
+    key: string;
+    /** Header label displayed in the column header. */
+    header: React.ReactNode;
+    /** Whether clicking this header sorts by the column. */
+    sortable?: boolean;
+    /** Optional column width (CSS value like '200px', '30%', 'auto'). */
+    width?: string;
+    /** Text alignment for cells in this column. */
+    align?: 'left' | 'center' | 'right';
+    /** Render the cell for a row; defaults to the row's raw value for this key. */
+    render?: (row: DataTableRow) => React.ReactNode;
+}
+export interface DataTableRow {
+    /** Unique row identifier. */
+    id: string;
+    /** Raw values keyed by column key — used for sorting, searching, and default rendering. */
+    values: Record<string, string | number | null | undefined>;
+}
+export interface DataTableSort {
+    /** The column being sorted. */
+    key: string;
+    /** Sort direction. */
+    direction: 'asc' | 'desc';
+}
+/** Props owned by DataTable itself — everything else falls through to the root element. */
+type DataTableOwnProps = {
+    /** Column definitions. */
+    columns: DataTableColumn[];
+    /** Row data, as raw values the table can sort and search. */
+    rows: DataTableRow[];
+    /** Rows per page. Setting this turns on the built-in pagination. */
+    pageSize?: number;
+    /** Adds a checkbox column with a select-all header. */
+    selectable?: boolean;
+    /** Selected row ids for controlled use. Pair with `onSelectionChange`. */
+    selectedIds?: string[];
+    /** Initially selected row ids for uncontrolled use. */
+    defaultSelectedIds?: string[];
+    /** Fires with the full list of selected row ids after every change. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Sort state for controlled use. Pair with `onSortChange`; `null` means unsorted. */
+    sort?: DataTableSort | null;
+    /** Initial sort state for uncontrolled use. */
+    defaultSort?: DataTableSort;
+    /** Fires with the new sort state — `null` when a third click clears the sort. */
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Shows the built-in search field, matching against every column's raw value. */
+    searchable?: boolean;
+    /** Placeholder for the search field. */
+    searchPlaceholder?: string;
+    /** Slot beside the search field for consumer-owned filter controls. */
+    toolbar?: React.ReactNode;
+    /** Visual size, passed through to the underlying Table. */
+    size?: 'default' | 'compact';
+    /** Alternating row backgrounds, passed through to the underlying Table. */
+    striped?: boolean;
+    /** Accessible caption for the underlying table (visually hidden). */
+    caption?: string;
+    /** What to render when no rows match — defaults to a built-in empty state. */
+    emptyState?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface DataTableProps extends DataTableOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DataTableOwnProps> {
+}
+/**
+ * DataTable is the wired version of Table: sorting on header click, a search
+ * field, row selection with a select-all header, client-side pagination, and
+ * an empty state — assembled from Table, Pagination, Checkbox, Input and
+ * EmptyState so a working data view is one component, not an afternoon of
+ * plumbing.
+ *
+ * Rows carry raw values rather than rendered nodes; a column's `render`
+ * turns them into cells when text isn't enough. For server-driven data,
+ * control `sort` and slot your own filters into `toolbar`.
+ */
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/DataTable/DataTable.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo } from "react";
+import { Table } from "../Table/Table.js";
+import { Pagination } from "../Pagination/Pagination.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { Input } from "../Input/Input.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import "./DataTable.css";
+import "../../fonts/material-symbols.css";
+const compareValues = (a, b) => {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+};
+const DataTable = React.forwardRef(
+  ({
+    columns,
+    rows,
+    pageSize,
+    selectable = false,
+    selectedIds,
+    defaultSelectedIds,
+    onSelectionChange,
+    sort,
+    defaultSort,
+    onSortChange,
+    searchable = false,
+    searchPlaceholder = "Search",
+    toolbar,
+    size = "default",
+    striped = false,
+    caption,
+    emptyState,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-data-table";
+    const [search, setSearch] = useState("");
+    const [page, setPage] = useState(1);
+    const isSortControlled = sort !== void 0;
+    const [uncontrolledSort, setUncontrolledSort] = useState(
+      defaultSort ?? null
+    );
+    const currentSort = isSortControlled ? sort : uncontrolledSort;
+    const isSelectionControlled = selectedIds !== void 0;
+    const [uncontrolledSelection, setUncontrolledSelection] = useState(
+      defaultSelectedIds ?? []
+    );
+    const currentSelection = isSelectionControlled ? selectedIds : uncontrolledSelection;
+    const setSelection = (ids) => {
+      if (!isSelectionControlled) setUncontrolledSelection(ids);
+      onSelectionChange?.(ids);
+    };
+    const cycleSort = (key) => {
+      let next;
+      if (currentSort?.key !== key) next = { key, direction: "asc" };
+      else if (currentSort.direction === "asc") next = { key, direction: "desc" };
+      else next = null;
+      if (!isSortControlled) setUncontrolledSort(next);
+      onSortChange?.(next);
+    };
+    const filteredRows = useMemo(() => {
+      if (!search.trim()) return rows;
+      const needle = search.trim().toLowerCase();
+      return rows.filter(
+        (row) => Object.values(row.values).some(
+          (value) => value != null && String(value).toLowerCase().includes(needle)
+        )
+      );
+    }, [rows, search]);
+    const sortedRows = useMemo(() => {
+      if (!currentSort) return filteredRows;
+      const { key, direction } = currentSort;
+      const factor = direction === "asc" ? 1 : -1;
+      return [...filteredRows].sort(
+        (a, b) => compareValues(a.values[key], b.values[key]) * factor
+      );
+    }, [filteredRows, currentSort]);
+    const pageCount = pageSize ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
+    const clampedPage = Math.min(page, pageCount);
+    const visibleRows = pageSize ? sortedRows.slice((clampedPage - 1) * pageSize, clampedPage * pageSize) : sortedRows;
+    const visibleIds = visibleRows.map((row) => row.id);
+    const selectedVisible = visibleIds.filter((id) => currentSelection.includes(id));
+    const allVisibleSelected = visibleIds.length > 0 && selectedVisible.length === visibleIds.length;
+    const someVisibleSelected = selectedVisible.length > 0 && !allVisibleSelected;
+    const toggleAllVisible = (checked) => {
+      if (checked) {
+        setSelection([.../* @__PURE__ */ new Set([...currentSelection, ...visibleIds])]);
+      } else {
+        setSelection(currentSelection.filter((id) => !visibleIds.includes(id)));
+      }
+    };
+    const toggleRow = (id, checked) => {
+      if (checked) setSelection([...currentSelection, id]);
+      else setSelection(currentSelection.filter((selected) => selected !== id));
+    };
+    const sortIcon = (key) => {
+      if (currentSort?.key !== key) return "swap_vert";
+      return currentSort.direction === "asc" ? "arrow_upward" : "arrow_downward";
+    };
+    const sortStateText = (key) => {
+      if (currentSort?.key !== key) return "not sorted";
+      return currentSort.direction === "asc" ? "sorted ascending" : "sorted descending";
+    };
+    const tableColumns = [
+      ...selectable ? [
+        {
+          key: "ds-data-table-select",
+          header: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "compact",
+              checked: allVisibleSelected,
+              indeterminate: someVisibleSelected,
+              onCheckedChange: toggleAllVisible,
+              "aria-label": "Select all rows on this page"
+            }
+          ),
+          width: "40px"
+        }
+      ] : [],
+      ...columns.map(
+        (col) => ({
+          key: col.key,
+          width: col.width,
+          align: col.align,
+          header: col.sortable ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__sort`,
+              "aria-label": `Sort by ${typeof col.header === "string" ? col.header : col.key}, ${sortStateText(col.key)}`,
+              onClick: () => cycleSort(col.key),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: col.header }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      `${baseClass}__sort-icon`,
+                      currentSort?.key === col.key ? `${baseClass}__sort-icon--active` : "",
+                      "material-symbols-rounded"
+                    ].filter(Boolean).join(" "),
+                    "aria-hidden": "true",
+                    children: sortIcon(col.key)
+                  }
+                )
+              ]
+            }
+          ) : col.header
+        })
+      )
+    ];
+    const tableRows = visibleRows.map((row) => ({
+      id: row.id,
+      cells: {
+        ...selectable ? {
+          "ds-data-table-select": /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "compact",
+              checked: currentSelection.includes(row.id),
+              onCheckedChange: (checked) => toggleRow(row.id, checked),
+              "aria-label": `Select row ${row.id}`
+            }
+          )
+        } : {},
+        ...Object.fromEntries(
+          columns.map((col) => [col.key, col.render ? col.render(row) : row.values[col.key]])
+        )
+      }
+    }));
+    const hasChrome = searchable || Boolean(toolbar);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      hasChrome && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__toolbar`, children: [
+        toolbar && /* @__PURE__ */ jsx("div", { className: `${baseClass}__filters`, children: toolbar }),
+        searchable && /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: `${baseClass}__search`,
+            size: "compact",
+            iconLeft: "search",
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            value: search,
+            onValueChange: (value) => {
+              setSearch(value);
+              setPage(1);
+            }
+          }
+        )
+      ] }),
+      visibleRows.length > 0 ? /* @__PURE__ */ jsx(
+        Table,
+        {
+          columns: tableColumns,
+          rows: tableRows,
+          size,
+          striped,
+          bordered: true,
+          caption,
+          captionHidden: true
+        }
+      ) : emptyState ?? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: "search_off",
+          title: "No matching rows",
+          description: "Adjust the search or filters and try again.",
+          variant: "bordered",
+          size: "compact"
+        }
+      ),
+      (pageSize !== void 0 || selectable) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__count`, "aria-live": "polite", children: selectable && currentSelection.length > 0 ? `${currentSelection.length} selected` : `${sortedRows.length} result${sortedRows.length === 1 ? "" : "s"}` }),
+        pageSize !== void 0 && pageCount > 1 && /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page: clampedPage,
+            pageCount,
+            onPageChange: setPage,
+            size: "compact"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+DataTable.displayName = "DataTable";
+export {
+  DataTable
+};

package/components/DateInput/DateInput.css

@@ -0,0 +1,127 @@
+/* ============================================
+   DATE INPUT COMPONENT
+   Date input with calendar icon and label
+   ============================================ */
+
+.ds-date-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+/* ============================================
+   FIELD WRAPPER
+   ============================================ */
+
+.ds-date-input__field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-date-input__icon {
+  position: absolute;
+  left: var(--padding-400); /* 16px */
+  top: 50%;
+  transform: translateY(-50%);
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  pointer-events: none;
+}
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-date-input__field {
+  width: 100%;
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  padding-left: calc(var(--padding-400) + 24px + var(--gap-200)); /* 16px + 24px icon + 8px gap */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 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-150) var(--padding-300); /* 6px 12px */
+  padding-left: calc(var(--padding-300) + 20px + var(--gap-200)); /* 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-300); /* 12px */
+  --icon-size: var(--icon-size-500);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+/* ============================================
+   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);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.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);
+}