@exxatdesignux/ui 0.0.5

package/src/lib/date-filter.ts

@@ -0,0 +1,67 @@
+/**
+ * Format any date string (ISO, MM/DD/YYYY, "Mar 15 2026", etc.) into the
+ * app-wide display format: MM/DD/YYYY.
+ * Returns "—" for empty / unparseable values.
+ */
+export function formatDateUS(raw: string | null | undefined): string {
+  if (!raw || raw.trim() === "—" || raw.trim() === "-") return "—"
+  // Already MM/DD/YYYY — return as-is
+  if (/^\d{2}\/\d{2}\/\d{4}$/.test(raw.trim())) return raw.trim()
+  const d = new Date(raw)
+  if (Number.isNaN(d.getTime())) return raw
+  const m  = String(d.getMonth() + 1).padStart(2, "0")
+  const day = String(d.getDate()).padStart(2, "0")
+  const y  = d.getFullYear()
+  return `${m}/${day}/${y}`
+}
+
+/**
+ * Format a Date (or ISO string) into "MM/DD/YYYY hh:mm AM/PM EST".
+ * Time zone label is always appended as the literal string "EST" (display only).
+ */
+export function formatDateTimeUS(raw: Date | string | null | undefined): string {
+  if (!raw) return "—"
+  const d = raw instanceof Date ? raw : new Date(raw)
+  if (Number.isNaN(d.getTime())) return String(raw)
+  const m    = String(d.getMonth() + 1).padStart(2, "0")
+  const day  = String(d.getDate()).padStart(2, "0")
+  const y    = d.getFullYear()
+  let   h    = d.getHours()
+  const min  = String(d.getMinutes()).padStart(2, "0")
+  const ampm = h >= 12 ? "PM" : "AM"
+  h = h % 12 || 12
+  return `${m}/${day}/${y} ${String(h).padStart(2, "0")}:${min} ${ampm} EST`
+}
+
+/** Parse a human-readable date string into YYYY-MM-DD for comparison (local timezone). */
+export function parseRowDateToYmd(raw: string): string | null {
+  const t = raw.trim()
+  if (!t || t === "—" || t === "-") return null
+  const d = new Date(t)
+  if (Number.isNaN(d.getTime())) return null
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, "0")
+  const day = String(d.getDate()).padStart(2, "0")
+  return `${y}-${m}-${day}`
+}
+
+/** Format YYYY-MM-DD for compact filter chip label. */
+export function formatYmdForDisplay(ymd: string): string {
+  const d = new Date(`${ymd}T12:00:00`)
+  if (Number.isNaN(d.getTime())) return ymd
+  return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })
+}
+
+/** Local noon to avoid timezone shifting the calendar day. */
+export function ymdToLocalDate(ymd: string | undefined): Date | undefined {
+  if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return undefined
+  const [y, m, d] = ymd.split("-").map(Number)
+  return new Date(y, m - 1, d, 12, 0, 0, 0)
+}
+
+export function localDateToYmd(d: Date): string {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, "0")
+  const day = String(d.getDate()).padStart(2, "0")
+  return `${y}-${m}-${day}`
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/theme/apply-windows-contrast-theme.ts

@@ -0,0 +1,29 @@
+import windowsContrastTheme from "./windows-contrast-theme.json"
+
+type WindowsContrastFile = {
+  light: Record<string, string>
+  dark: Record<string, string>
+}
+
+const file = windowsContrastTheme as WindowsContrastFile
+
+const WINDOWS_VAR_KEYS = new Set([
+  ...Object.keys(file.light),
+  ...Object.keys(file.dark),
+])
+
+export function applyWindowsContrastTheme() {
+  const el = document.documentElement
+  const isDark = el.classList.contains("dark")
+  const map = isDark ? file.dark : file.light
+  for (const [prop, val] of Object.entries(map)) {
+    el.style.setProperty(prop, val)
+  }
+}
+
+export function clearWindowsContrastTheme() {
+  const el = document.documentElement
+  for (const key of WINDOWS_VAR_KEYS) {
+    el.style.removeProperty(key)
+  }
+}

package/src/theme/windows-contrast-theme.json

@@ -0,0 +1,147 @@
+{
+  "$comment": "In-app “Windows (JSON)” contrast mode. Edit hex or oklch() strings to match a Windows Contrast theme (Settings → Accessibility → Contrast themes) or an exported .theme file. Keys are Exxat semantic CSS variables on <html>. Light/dark follow the app’s light/dark mode (next-themes).",
+  "windowsSettingsLabels": {
+    "Background": "Canvas — maps to --background, surfaces, sidebar base",
+    "Text": "Text — maps to --foreground and readable copy tokens",
+    "Hyperlink": "Hyperlinks — mapped to --primary / focus via --ring where useful",
+    "Selected text": "Selected text — maps to --accent and --accent-foreground",
+    "Button text": "Button text — maps to --primary / --primary-foreground pair",
+    "Disabled text": "Disabled text — maps to --muted / --muted-foreground"
+  },
+  "light": {
+    "--hc-highlight": "#0000ff",
+    "--hc-highlight-text": "#ffffff",
+    "--background": "#ffffff",
+    "--foreground": "#000000",
+    "--card": "#ffffff",
+    "--card-foreground": "#000000",
+    "--popover": "#ffffff",
+    "--popover-foreground": "#000000",
+    "--primary": "#0000ff",
+    "--primary-foreground": "#ffffff",
+    "--secondary": "#ffffff",
+    "--secondary-foreground": "#000000",
+    "--muted": "#e8e8e8",
+    "--muted-foreground": "#3b3b3b",
+    "--accent": "#0000ff",
+    "--accent-foreground": "#ffffff",
+    "--destructive": "#b5200d",
+    "--destructive-foreground": "#ffffff",
+    "--border": "#000000",
+    "--border-control": "#000000",
+    "--border-control-3": "#000000",
+    "--border-control-35": "#000000",
+    "--control-border": "#000000",
+    "--input": "#000000",
+    "--input-background": "#ffffff",
+    "--ring": "#0000ff",
+    "--sidebar": "#ffffff",
+    "--sidebar-foreground": "#000000",
+    "--sidebar-primary": "#000000",
+    "--sidebar-primary-foreground": "#ffffff",
+    "--sidebar-accent": "#d9d9d9",
+    "--sidebar-accent-foreground": "#000000",
+    "--sidebar-border": "#000000",
+    "--sidebar-ring": "#0000ff",
+    "--sidebar-section-label-foreground": "#515151",
+    "--brand-tint": "#f0f0f0",
+    "--brand-tint-light": "#f7f7f7",
+    "--brand-tint-subtle": "#fafafa",
+    "--chart-1": "#000000",
+    "--chart-2": "#3b3b3b",
+    "--chart-3": "#6e6e6e",
+    "--chart-4": "#a0a0a0",
+    "--chart-5": "#d1d1d1",
+    "--chip-1": "#000000",
+    "--chip-2": "#000000",
+    "--chip-3": "#000000",
+    "--chip-4": "#000000",
+    "--chip-5": "#000000",
+    "--chip-destructive": "#b5200d",
+    "--interactive-hover": "#e0e0e0",
+    "--interactive-hover-foreground": "#000000",
+    "--interactive-hover-subtle": "#ebebeb",
+    "--interactive-hover-soft": "#ebebeb",
+    "--interactive-hover-medium": "#d5d5d5",
+    "--interactive-hover-strong": "#cccccc",
+    "--interactive-hover-row": "#e0e0e0",
+    "--overlay": "color-mix(in srgb, #000000 18%, transparent)",
+    "--dt-row-bg": "#ffffff",
+    "--dt-row-hover": "#ebebeb",
+    "--dt-row-selected": "#0000ff",
+    "--dt-row-selected-fg": "#ffffff",
+    "--dt-header-bg": "#ffffff",
+    "--dt-group-bg": "#ebebeb",
+    "--dt-new-row-bg": "#ffffff",
+    "--dt-new-row-border": "#000000",
+    "--theme-color-chrome": "#ffffff"
+  },
+  "dark": {
+    "--hc-highlight": "#ffff00",
+    "--hc-highlight-text": "#000000",
+    "--background": "#000000",
+    "--foreground": "#ffffff",
+    "--card": "#000000",
+    "--card-foreground": "#ffffff",
+    "--popover": "#0a0a0a",
+    "--popover-foreground": "#ffffff",
+    "--primary": "#00ffff",
+    "--primary-foreground": "#000000",
+    "--secondary": "#000000",
+    "--secondary-foreground": "#ffffff",
+    "--muted": "#1a1a1a",
+    "--muted-foreground": "#ffffff",
+    "--accent": "#ffff00",
+    "--accent-foreground": "#000000",
+    "--destructive": "#ff8080",
+    "--destructive-foreground": "#000000",
+    "--border": "#ffffff",
+    "--border-control": "#ffffff",
+    "--border-control-3": "#ffffff",
+    "--border-control-35": "#ffffff",
+    "--control-border": "#ffffff",
+    "--input": "#ffffff",
+    "--input-background": "#000000",
+    "--ring": "#ffff00",
+    "--sidebar": "#000000",
+    "--sidebar-foreground": "#ffffff",
+    "--sidebar-primary": "#ffffff",
+    "--sidebar-primary-foreground": "#000000",
+    "--sidebar-accent": "#1a1a1a",
+    "--sidebar-accent-foreground": "#ffffff",
+    "--sidebar-border": "#ffffff",
+    "--sidebar-ring": "#ffff00",
+    "--sidebar-section-label-foreground": "#c8c8c8",
+    "--brand-tint": "#1a1a1a",
+    "--brand-tint-light": "#141414",
+    "--brand-tint-subtle": "#101010",
+    "--chart-1": "#ffffff",
+    "--chart-2": "#c8c8c8",
+    "--chart-3": "#8e8e8e",
+    "--chart-4": "#5a5a5a",
+    "--chart-5": "#2e2e2e",
+    "--chip-1": "#ffffff",
+    "--chip-2": "#ffffff",
+    "--chip-3": "#ffffff",
+    "--chip-4": "#ffffff",
+    "--chip-5": "#ffffff",
+    "--chip-destructive": "#ff8080",
+    "--interactive-hover": "#262626",
+    "--interactive-hover-foreground": "#ffffff",
+    "--interactive-hover-subtle": "#1f1f1f",
+    "--interactive-hover-soft": "#1f1f1f",
+    "--interactive-hover-medium": "#2e2e2e",
+    "--interactive-hover-strong": "#383838",
+    "--interactive-hover-row": "#262626",
+    "--overlay": "color-mix(in srgb, #ffffff 22%, transparent)",
+    "--dt-row-bg": "#000000",
+    "--dt-row-hover": "#1a1a1a",
+    "--dt-row-selected": "#ffff00",
+    "--dt-row-selected-fg": "#000000",
+    "--dt-header-bg": "#000000",
+    "--dt-group-bg": "#1a1a1a",
+    "--dt-new-row-bg": "#000000",
+    "--dt-new-row-border": "#ffffff",
+    "--theme-color-chrome": "#000000"
+  }
+}