@countermeasure-platform/web-components 0.2.0

package/dist/react/primitives/date-picker.js

@@ -0,0 +1,394 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { Calendar as t } from "./calendar.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "react";
+//#region src/react/primitives/date-picker.tsx
+function a(e, t, n) {
+	if (t === "YYYY-MM-DD") return e.toISOString().split("T")[0] ?? "";
+	let r = n ?? (typeof navigator < "u" ? navigator.language : "en-US");
+	return new Intl.DateTimeFormat(r, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).format(e);
+}
+function o(e) {
+	let t = e.trim();
+	if (t === "") return null;
+	let n = t.replace(/\D/g, "");
+	if (n.length >= 8) {
+		let e = parseInt(n.substring(0, 4), 10), t = parseInt(n.substring(4, 6), 10), r = parseInt(n.substring(6, 8), 10);
+		if (!isNaN(e) && t >= 1 && t <= 12 && r >= 1 && r <= 31) {
+			let n = new Date(e, t - 1, r);
+			if (!isNaN(n.getTime())) return n;
+		}
+	}
+	let r = new Date(t);
+	return isNaN(r.getTime()) ? null : r;
+}
+var s = () => /* @__PURE__ */ r("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	children: [/* @__PURE__ */ n("rect", {
+		x: "2",
+		y: "3",
+		width: "12",
+		height: "11",
+		rx: "1.5",
+		stroke: "currentColor",
+		strokeWidth: "1.2"
+	}), /* @__PURE__ */ n("path", {
+		d: "M2 6.5h12M5.5 2v2M10.5 2v2",
+		stroke: "currentColor",
+		strokeWidth: "1.2",
+		strokeLinecap: "round"
+	})]
+}), c = () => /* @__PURE__ */ n("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 14 14",
+	fill: "none",
+	children: /* @__PURE__ */ n("path", {
+		d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round"
+	})
+});
+function l({ value: l, format: u = "YYYY-MM-DD", placeholder: d, minDate: f, maxDate: p, disabledDates: m, weekStart: h, locale: g, className: _, onChange: v }) {
+	let [y, b] = i.useState(!1), [x, S] = i.useState(l ? a(l, u, g) : ""), C = i.useRef(null);
+	i.useEffect(() => {
+		S(l ? a(l, u, g) : "");
+	}, [
+		l,
+		u,
+		g
+	]), i.useEffect(() => {
+		if (!y) return;
+		function e(e) {
+			C.current && !C.current.contains(e.target) && b(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [y]);
+	function w() {
+		let e = o(x);
+		e && (S(a(e, u, g)), v?.(e));
+	}
+	function T(e) {
+		S(a(e, u, g)), v?.(e), b(!1);
+	}
+	function E(e) {
+		e.stopPropagation(), S(""), v?.(null);
+	}
+	return /* @__PURE__ */ r("div", {
+		ref: C,
+		"data-slot": "date-picker",
+		className: e("relative inline-block w-full", _),
+		children: [/* @__PURE__ */ r("div", {
+			className: "relative flex items-center",
+			children: [/* @__PURE__ */ n("input", {
+				type: "text",
+				role: "combobox",
+				"aria-haspopup": "dialog",
+				"aria-expanded": y,
+				"aria-label": "Date",
+				autoComplete: "off",
+				placeholder: d ?? u.toLowerCase(),
+				className: e("border-border-glass bg-glass text-foreground h-10 w-full rounded-xl border px-4 pr-20 py-2 text-[13px] backdrop-blur-[20px]", "placeholder:text-foreground-muted", "transition-all duration-[250ms] outline-none", "focus:border-primary focus:shadow-glow"),
+				value: x,
+				onChange: (e) => S(e.target.value),
+				onBlur: w,
+				onKeyDown: (e) => {
+					e.key === "Enter" && w(), e.key === "Escape" && y && (e.preventDefault(), b(!1)), e.key === "ArrowDown" && !y && (e.preventDefault(), b(!0));
+				},
+				onFocus: () => b(!0)
+			}), /* @__PURE__ */ r("div", {
+				className: "absolute right-1 flex items-center gap-0.5",
+				children: [x && /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": "Clear date",
+					onClick: E,
+					className: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+					children: /* @__PURE__ */ n(c, {})
+				}), /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": "Open calendar",
+					onClick: () => b((e) => !e),
+					className: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+					children: /* @__PURE__ */ n(s, {})
+				})]
+			})]
+		}), y && /* @__PURE__ */ n("div", {
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-label": "Choose date",
+			className: e("absolute left-0 z-50 mt-2 rounded-xl border border-border-glass bg-glass p-3 shadow-lg backdrop-blur-[20px]", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"),
+			children: /* @__PURE__ */ n(t, {
+				value: l,
+				mode: "single",
+				...f === void 0 ? {} : { minDate: f },
+				...p === void 0 ? {} : { maxDate: p },
+				...m === void 0 ? {} : { disabledDates: m },
+				...h === void 0 ? {} : { weekStart: h },
+				onChange: T
+			})
+		})]
+	});
+}
+function u() {
+	return [
+		{
+			label: "Last 7 days",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
+				return t.setDate(t.getDate() - 6), [t, e];
+			}
+		},
+		{
+			label: "Last 30 days",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
+				return t.setDate(t.getDate() - 29), [t, e];
+			}
+		},
+		{
+			label: "Last 90 days",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
+				return t.setDate(t.getDate() - 89), [t, e];
+			}
+		},
+		{
+			label: "Year to date",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date();
+				return [new Date(e.getFullYear(), 0, 1), e];
+			}
+		}
+	];
+}
+function d({ startDate: o, endDate: c, format: l = "YYYY-MM-DD", presets: d, minDate: f, maxDate: p, locale: m, className: h, onChange: g }) {
+	let [_, v] = i.useState(!1), [y, b] = i.useState(o ?? null), [x, S] = i.useState(c ?? null), C = i.useRef(null);
+	i.useEffect(() => {
+		b(o ?? null), S(c ?? null);
+	}, [o, c]), i.useEffect(() => {
+		if (!_) return;
+		function e(e) {
+			C.current && !C.current.contains(e.target) && v(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [_]);
+	let w = i.useMemo(() => o && c ? `${a(o, l, m)} \u2014 ${a(c, l, m)}` : o ? `${a(o, l, m)} \u2014 ...` : "", [
+		o,
+		c,
+		l,
+		m
+	]), T = d ?? u();
+	function E() {
+		b(o ?? null), S(c ?? null), v(!0);
+	}
+	function D() {
+		g?.(y, x), v(!1);
+	}
+	function O(e) {
+		let [t, n] = e.getRange();
+		b(t), S(n);
+	}
+	let k = {
+		mode: "range",
+		rangeStart: y,
+		rangeEnd: x,
+		...f === void 0 ? {} : { minDate: f },
+		...p === void 0 ? {} : { maxDate: p },
+		onRangeChange: (e, t) => {
+			b(e), S(t);
+		}
+	};
+	return /* @__PURE__ */ r("div", {
+		ref: C,
+		"data-slot": "date-range-picker",
+		className: e("relative inline-block w-full", h),
+		children: [/* @__PURE__ */ r("div", {
+			className: "relative flex items-center",
+			children: [/* @__PURE__ */ n("input", {
+				type: "text",
+				readOnly: !0,
+				role: "combobox",
+				"aria-haspopup": "dialog",
+				"aria-expanded": _,
+				"aria-label": "Date range",
+				placeholder: "Select date range",
+				className: e("border-border-glass bg-glass text-foreground h-10 w-full cursor-pointer rounded-xl border px-4 pr-12 py-2 text-[13px] backdrop-blur-[20px]", "placeholder:text-foreground-muted", "transition-all duration-[250ms] outline-none", "focus:border-primary focus:shadow-glow"),
+				value: w,
+				onClick: () => _ ? v(!1) : E(),
+				onKeyDown: (e) => {
+					e.key === "Escape" && _ && (e.preventDefault(), v(!1));
+				}
+			}), /* @__PURE__ */ n("button", {
+				type: "button",
+				"aria-label": "Open date range picker",
+				onClick: (e) => {
+					e.stopPropagation(), _ ? v(!1) : E();
+				},
+				className: "absolute right-2 inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+				children: /* @__PURE__ */ n(s, {})
+			})]
+		}), _ && /* @__PURE__ */ r("div", {
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-label": "Choose date range",
+			className: e("absolute left-0 z-50 mt-2 rounded-xl border border-border-glass bg-glass p-4 shadow-lg backdrop-blur-[20px]", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"),
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex gap-4",
+				children: [/* @__PURE__ */ n("div", {
+					className: "flex min-w-[140px] flex-col gap-1",
+					children: T.map((t) => /* @__PURE__ */ n("button", {
+						type: "button",
+						className: e("rounded-lg px-3 py-2 text-left text-[12px] transition-all duration-200", "text-foreground-secondary hover:bg-glass-hover hover:text-foreground"),
+						onClick: () => O(t),
+						children: t.label
+					}, t.label))
+				}), /* @__PURE__ */ r("div", {
+					className: "flex gap-4",
+					children: [/* @__PURE__ */ n(t, { ...k }), /* @__PURE__ */ n(t, { ...k })]
+				})]
+			}), /* @__PURE__ */ r("div", {
+				className: "mt-3 flex justify-end gap-2 border-t border-border-glass pt-3",
+				children: [/* @__PURE__ */ n("button", {
+					type: "button",
+					className: e("rounded-xl px-4 py-2 text-[13px] transition-all duration-200", "text-foreground-secondary hover:bg-glass-hover hover:text-foreground"),
+					onClick: () => v(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ n("button", {
+					type: "button",
+					className: e("rounded-xl bg-primary px-4 py-2 text-[13px] font-medium text-white shadow-glow transition-all duration-200", "hover:brightness-110"),
+					onClick: D,
+					children: "Apply"
+				})]
+			})]
+		})]
+	});
+}
+function f(e) {
+	return String(e).padStart(2, "0");
+}
+function p({ value: o, format: c = "YYYY-MM-DD", placeholder: l, minDate: u, maxDate: d, disabledDates: p, weekStart: m, locale: h, use24Hour: g = !1, className: _, onChange: v }) {
+	let [y, b] = i.useState(!1), [x, S] = i.useState(o ?? null), [C, w] = i.useState(o ? o.getHours() : 0), [T, E] = i.useState(o ? o.getMinutes() : 0), D = i.useRef(null);
+	i.useEffect(() => {
+		S(o ?? null), o && (w(o.getHours()), E(o.getMinutes()));
+	}, [o]), i.useEffect(() => {
+		if (!y) return;
+		function e(e) {
+			D.current && !D.current.contains(e.target) && b(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [y]);
+	function O(e, t, n) {
+		if (!e) {
+			v?.(null);
+			return;
+		}
+		let r = new Date(e.getFullYear(), e.getMonth(), e.getDate(), t, n, 0);
+		v?.(r);
+	}
+	function k(e) {
+		S(e), O(e, C, T);
+	}
+	function A(e) {
+		let t = parseInt(e.target.value, 10);
+		!isNaN(t) && t >= (g ? 0 : 1) && t <= (g ? 23 : 12) && (w(t), O(x, t, T));
+	}
+	function j(e) {
+		let t = parseInt(e.target.value, 10);
+		!isNaN(t) && t >= 0 && t <= 59 && (E(t), O(x, C, t));
+	}
+	let M = i.useMemo(() => x ? `${a(x, c, h)} ${`${f(C)}:${f(T)}`}` : "", [
+		x,
+		C,
+		T,
+		c,
+		h
+	]), N = e("border-border-glass bg-glass h-8 w-14 rounded-lg border px-2 text-center text-[13px] text-foreground", "outline-none transition-all duration-200 focus:border-primary focus:shadow-glow backdrop-blur-[20px]");
+	return /* @__PURE__ */ r("div", {
+		ref: D,
+		"data-slot": "date-time-picker",
+		className: e("relative inline-block w-full", _),
+		children: [/* @__PURE__ */ r("div", {
+			className: "relative flex items-center",
+			children: [/* @__PURE__ */ n("input", {
+				type: "text",
+				readOnly: !0,
+				role: "combobox",
+				"aria-haspopup": "dialog",
+				"aria-expanded": y,
+				"aria-label": "Date and time",
+				placeholder: l ?? `${c.toLowerCase()} hh:mm`,
+				className: e("border-border-glass bg-glass text-foreground h-10 w-full cursor-pointer rounded-xl border px-4 pr-12 py-2 text-[13px] backdrop-blur-[20px]", "placeholder:text-foreground-muted", "transition-all duration-[250ms] outline-none", "focus:border-primary focus:shadow-glow"),
+				value: M,
+				onClick: () => b((e) => !e),
+				onKeyDown: (e) => {
+					e.key === "Escape" && y && (e.preventDefault(), b(!1));
+				}
+			}), /* @__PURE__ */ n("button", {
+				type: "button",
+				"aria-label": "Open date time picker",
+				onClick: (e) => {
+					e.stopPropagation(), b((e) => !e);
+				},
+				className: "absolute right-2 inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+				children: /* @__PURE__ */ n(s, {})
+			})]
+		}), y && /* @__PURE__ */ r("div", {
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-label": "Choose date and time",
+			className: e("absolute left-0 z-50 mt-2 rounded-xl border border-border-glass bg-glass p-3 shadow-lg backdrop-blur-[20px]", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"),
+			children: [/* @__PURE__ */ n(t, {
+				value: x,
+				mode: "single",
+				minDate: u,
+				maxDate: d,
+				disabledDates: p,
+				weekStart: m,
+				onChange: k
+			}), /* @__PURE__ */ r("div", {
+				className: "mt-3 flex items-center justify-center gap-1 border-t border-border-glass pt-3",
+				children: [
+					/* @__PURE__ */ n("span", {
+						className: "mr-2 text-[12px] text-foreground-muted",
+						children: "Time"
+					}),
+					/* @__PURE__ */ n("input", {
+						type: "number",
+						"aria-label": "Hours",
+						className: N,
+						min: g ? 0 : 1,
+						max: g ? 23 : 12,
+						value: f(C),
+						onChange: A
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "text-foreground-muted",
+						"aria-hidden": "true",
+						children: ":"
+					}),
+					/* @__PURE__ */ n("input", {
+						type: "number",
+						"aria-label": "Minutes",
+						className: N,
+						min: 0,
+						max: 59,
+						value: f(T),
+						onChange: j
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { l as DatePicker, d as DateRangePicker, p as DateTimePicker };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/react/primitives/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../src/react/primitives/date-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from './utils'\nimport { Calendar } from './calendar'\n\nexport interface DatePickerProps {\n  /** Selected date */\n  value?: Date | null\n  /** Date format string for display */\n  format?: string\n  /** Placeholder text */\n  placeholder?: string\n  /** Minimum selectable date */\n  minDate?: Date\n  /** Maximum selectable date */\n  maxDate?: Date\n  /** Dates that cannot be selected */\n  disabledDates?: Date[] | ((date: Date) => boolean)\n  /** First day of the week: 0 = Sunday, 1 = Monday */\n  weekStart?: 0 | 1\n  /** Locale for date formatting */\n  locale?: string\n  /** Additional class name */\n  className?: string\n  /** Callback when date is selected or cleared */\n  onChange?: (date: Date | null) => void\n}\n\nexport interface DateRangePreset {\n  label: string\n  getRange: () => [Date, Date]\n}\n\nexport interface DateRangePickerProps {\n  /** Range start date */\n  startDate?: Date | null\n  /** Range end date */\n  endDate?: Date | null\n  /** Date format string for display */\n  format?: string\n  /** Preset range options */\n  presets?: DateRangePreset[]\n  /** Minimum selectable date */\n  minDate?: Date\n  /** Maximum selectable date */\n  maxDate?: Date\n  /** Locale for date formatting */\n  locale?: string\n  /** Additional class name */\n  className?: string\n  /** Callback when range changes */\n  onChange?: (start: Date | null, end: Date | null) => void\n}\n\nexport interface DateTimePickerProps extends Omit<DatePickerProps, 'onChange'> {\n  /** Whether to use 24-hour format */\n  use24Hour?: boolean\n  /** Callback when date or time changes */\n  onChange?: (date: Date | null) => void\n}\n\nfunction formatDate(date: Date, format: string, locale?: string): string {\n  if (format === 'YYYY-MM-DD') {\n    return date.toISOString().split('T')[0] ?? ''\n  }\n  const loc = locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en-US')\n  return new Intl.DateTimeFormat(loc, {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n  }).format(date)\n}\n\nfunction parseDate(str: string): Date | null {\n  const clean = str.trim()\n  if (clean === '') return null\n  const digits = clean.replace(/\\D/g, '')\n  if (digits.length >= 8) {\n    const year = parseInt(digits.substring(0, 4), 10)\n    const month = parseInt(digits.substring(4, 6), 10)\n    const day = parseInt(digits.substring(6, 8), 10)\n    if (!isNaN(year) && month >= 1 && month <= 12 && day >= 1 && day <= 31) {\n      const result = new Date(year, month - 1, day)\n      if (!isNaN(result.getTime())) return result\n    }\n  }\n  const parsed = new Date(clean)\n  if (!isNaN(parsed.getTime())) return parsed\n  return null\n}\n\nconst CalendarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n    <rect x=\"2\" y=\"3\" width=\"12\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n    <path\n      d=\"M2 6.5h12M5.5 2v2M10.5 2v2\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.2\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n)\n\nconst ClearIcon = () => (\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n    <path\n      d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n)\n\n// --- DatePicker ---\n\nfunction DatePicker({\n  value,\n  format = 'YYYY-MM-DD',\n  placeholder,\n  minDate,\n  maxDate,\n  disabledDates,\n  weekStart,\n  locale,\n  className,\n  onChange,\n}: DatePickerProps) {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [inputValue, setInputValue] = React.useState(value ? formatDate(value, format, locale) : '')\n  const rootRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    setInputValue(value ? formatDate(value, format, locale) : '')\n  }, [value, format, locale])\n\n  // Close on outside click\n  React.useEffect(() => {\n    if (!isOpen) return\n    function handleClick(e: MouseEvent) {\n      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  function handleInputCommit() {\n    const parsed = parseDate(inputValue)\n    if (parsed) {\n      setInputValue(formatDate(parsed, format, locale))\n      onChange?.(parsed)\n    }\n  }\n\n  function handleCalendarChange(date: Date) {\n    setInputValue(formatDate(date, format, locale))\n    onChange?.(date)\n    setIsOpen(false)\n  }\n\n  function handleClear(e: React.MouseEvent) {\n    e.stopPropagation()\n    setInputValue('')\n    onChange?.(null)\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"date-picker\"\n      className={cn('relative inline-block w-full', className)}\n    >\n      <div className=\"relative flex items-center\">\n        <input\n          type=\"text\"\n          role=\"combobox\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-label=\"Date\"\n          autoComplete=\"off\"\n          placeholder={placeholder ?? format.toLowerCase()}\n          className={cn(\n            'border-border-glass bg-glass text-foreground h-10 w-full rounded-xl border px-4 pr-20 py-2 text-[13px] backdrop-blur-[20px]',\n            'placeholder:text-foreground-muted',\n            'transition-all duration-[250ms] outline-none',\n            'focus:border-primary focus:shadow-glow'\n          )}\n          value={inputValue}\n          onChange={e => setInputValue(e.target.value)}\n          onBlur={handleInputCommit}\n          onKeyDown={e => {\n            if (e.key === 'Enter') handleInputCommit()\n            if (e.key === 'Escape' && isOpen) {\n              e.preventDefault()\n              setIsOpen(false)\n            }\n            if (e.key === 'ArrowDown' && !isOpen) {\n              e.preventDefault()\n              setIsOpen(true)\n            }\n          }}\n          onFocus={() => setIsOpen(true)}\n        />\n        <div className=\"absolute right-1 flex items-center gap-0.5\">\n          {inputValue && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear date\"\n              onClick={handleClear}\n              className=\"inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground\"\n            >\n              <ClearIcon />\n            </button>\n          )}\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            onClick={() => setIsOpen(o => !o)}\n            className=\"inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground\"\n          >\n            <CalendarIcon />\n          </button>\n        </div>\n      </div>\n\n      {isOpen && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"false\"\n          aria-label=\"Choose date\"\n          className={cn(\n            'absolute left-0 z-50 mt-2 rounded-xl border border-border-glass bg-glass p-3 shadow-lg backdrop-blur-[20px]',\n            'animate-in fade-in-0 zoom-in-95 slide-in-from-top-2'\n          )}\n        >\n          <Calendar\n            value={value}\n            mode=\"single\"\n            {...(minDate !== undefined ? { minDate } : {})}\n            {...(maxDate !== undefined ? { maxDate } : {})}\n            {...(disabledDates !== undefined ? { disabledDates } : {})}\n            {...(weekStart !== undefined ? { weekStart } : {})}\n            onChange={handleCalendarChange}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n\n// --- DateRangePicker ---\n\nfunction defaultPresets(): DateRangePreset[] {\n  return [\n    {\n      label: 'Last 7 days',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date()\n        start.setDate(start.getDate() - 6)\n        return [start, end]\n      },\n    },\n    {\n      label: 'Last 30 days',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date()\n        start.setDate(start.getDate() - 29)\n        return [start, end]\n      },\n    },\n    {\n      label: 'Last 90 days',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date()\n        start.setDate(start.getDate() - 89)\n        return [start, end]\n      },\n    },\n    {\n      label: 'Year to date',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date(end.getFullYear(), 0, 1)\n        return [start, end]\n      },\n    },\n  ]\n}\n\nfunction DateRangePicker({\n  startDate,\n  endDate,\n  format = 'YYYY-MM-DD',\n  presets,\n  minDate,\n  maxDate,\n  locale,\n  className,\n  onChange,\n}: DateRangePickerProps) {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [pendingStart, setPendingStart] = React.useState<Date | null>(startDate ?? null)\n  const [pendingEnd, setPendingEnd] = React.useState<Date | null>(endDate ?? null)\n  const rootRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    setPendingStart(startDate ?? null)\n    setPendingEnd(endDate ?? null)\n  }, [startDate, endDate])\n\n  // Close on outside click\n  React.useEffect(() => {\n    if (!isOpen) return\n    function handleClick(e: MouseEvent) {\n      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  const displayValue = React.useMemo(() => {\n    if (startDate && endDate)\n      return `${formatDate(startDate, format, locale)} \\u2014 ${formatDate(endDate, format, locale)}`\n    if (startDate) return `${formatDate(startDate, format, locale)} \\u2014 ...`\n    return ''\n  }, [startDate, endDate, format, locale])\n\n  const presetList = presets ?? defaultPresets()\n\n  function handleOpen() {\n    setPendingStart(startDate ?? null)\n    setPendingEnd(endDate ?? null)\n    setIsOpen(true)\n  }\n\n  function handleApply() {\n    onChange?.(pendingStart, pendingEnd)\n    setIsOpen(false)\n  }\n\n  function handlePreset(preset: DateRangePreset) {\n    const [start, end] = preset.getRange()\n    setPendingStart(start)\n    setPendingEnd(end)\n  }\n\n  const sharedCalendarProps = {\n    mode: 'range' as const,\n    rangeStart: pendingStart,\n    rangeEnd: pendingEnd,\n    ...(minDate !== undefined ? { minDate } : {}),\n    ...(maxDate !== undefined ? { maxDate } : {}),\n    onRangeChange: (start: Date | null, end: Date | null) => {\n      setPendingStart(start)\n      setPendingEnd(end)\n    },\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"date-range-picker\"\n      className={cn('relative inline-block w-full', className)}\n    >\n      <div className=\"relative flex items-center\">\n        <input\n          type=\"text\"\n          readOnly\n          role=\"combobox\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-label=\"Date range\"\n          placeholder=\"Select date range\"\n          className={cn(\n            'border-border-glass bg-glass text-foreground h-10 w-full cursor-pointer rounded-xl border px-4 pr-12 py-2 text-[13px] backdrop-blur-[20px]',\n            'placeholder:text-foreground-muted',\n            'transition-all duration-[250ms] outline-none',\n            'focus:border-primary focus:shadow-glow'\n          )}\n          value={displayValue}\n          onClick={() => (isOpen ? setIsOpen(false) : handleOpen())}\n          onKeyDown={e => {\n            if (e.key === 'Escape' && isOpen) {\n              e.preventDefault()\n              setIsOpen(false)\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          aria-label=\"Open date range picker\"\n          onClick={e => {\n            e.stopPropagation()\n            if (isOpen) {\n              setIsOpen(false)\n            } else {\n              handleOpen()\n            }\n          }}\n          className=\"absolute right-2 inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground\"\n        >\n          <CalendarIcon />\n        </button>\n      </div>\n\n      {isOpen && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"false\"\n          aria-label=\"Choose date range\"\n          className={cn(\n            'absolute left-0 z-50 mt-2 rounded-xl border border-border-glass bg-glass p-4 shadow-lg backdrop-blur-[20px]',\n            'animate-in fade-in-0 zoom-in-95 slide-in-from-top-2'\n          )}\n        >\n          <div className=\"flex gap-4\">\n            {/* Presets sidebar */}\n            <div className=\"flex min-w-[140px] flex-col gap-1\">\n              {presetList.map(preset => (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  className={cn(\n                    'rounded-lg px-3 py-2 text-left text-[12px] transition-all duration-200',\n                    'text-foreground-secondary hover:bg-glass-hover hover:text-foreground'\n                  )}\n                  onClick={() => handlePreset(preset)}\n                >\n                  {preset.label}\n                </button>\n              ))}\n            </div>\n\n            {/* Calendars */}\n            <div className=\"flex gap-4\">\n              <Calendar {...sharedCalendarProps} />\n              <Calendar {...sharedCalendarProps} />\n            </div>\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-3 flex justify-end gap-2 border-t border-border-glass pt-3\">\n            <button\n              type=\"button\"\n              className={cn(\n                'rounded-xl px-4 py-2 text-[13px] transition-all duration-200',\n                'text-foreground-secondary hover:bg-glass-hover hover:text-foreground'\n              )}\n              onClick={() => setIsOpen(false)}\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              className={cn(\n                'rounded-xl bg-primary px-4 py-2 text-[13px] font-medium text-white shadow-glow transition-all duration-200',\n                'hover:brightness-110'\n              )}\n              onClick={handleApply}\n            >\n              Apply\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// --- DateTimePicker ---\n\nfunction padTwo(n: number): string {\n  return String(n).padStart(2, '0')\n}\n\nfunction DateTimePicker({\n  value,\n  format = 'YYYY-MM-DD',\n  placeholder,\n  minDate,\n  maxDate,\n  disabledDates,\n  weekStart,\n  locale,\n  use24Hour = false,\n  className,\n  onChange,\n}: DateTimePickerProps) {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [selectedDate, setSelectedDate] = React.useState<Date | null>(value ?? null)\n  const [hours, setHours] = React.useState(value ? value.getHours() : 0)\n  const [minutes, setMinutes] = React.useState(value ? value.getMinutes() : 0)\n  const rootRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    setSelectedDate(value ?? null)\n    if (value) {\n      setHours(value.getHours())\n      setMinutes(value.getMinutes())\n    }\n  }, [value])\n\n  // Close on outside click\n  React.useEffect(() => {\n    if (!isOpen) return\n    function handleClick(e: MouseEvent) {\n      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  function emitChange(date: Date | null, h: number, m: number) {\n    if (!date) {\n      onChange?.(null)\n      return\n    }\n    const combined = new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, 0)\n    onChange?.(combined)\n  }\n\n  function handleCalendarChange(date: Date) {\n    setSelectedDate(date)\n    emitChange(date, hours, minutes)\n  }\n\n  function handleHourChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const v = parseInt(e.target.value, 10)\n    const max = use24Hour ? 23 : 12\n    const min = use24Hour ? 0 : 1\n    if (!isNaN(v) && v >= min && v <= max) {\n      setHours(v)\n      emitChange(selectedDate, v, minutes)\n    }\n  }\n\n  function handleMinuteChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const v = parseInt(e.target.value, 10)\n    if (!isNaN(v) && v >= 0 && v <= 59) {\n      setMinutes(v)\n      emitChange(selectedDate, hours, v)\n    }\n  }\n\n  const displayValue = React.useMemo(() => {\n    if (!selectedDate) return ''\n    const dateStr = formatDate(selectedDate, format, locale)\n    const timeStr = `${padTwo(hours)}:${padTwo(minutes)}`\n    return `${dateStr} ${timeStr}`\n  }, [selectedDate, hours, minutes, format, locale])\n\n  const timeInputClass = cn(\n    'border-border-glass bg-glass h-8 w-14 rounded-lg border px-2 text-center text-[13px] text-foreground',\n    'outline-none transition-all duration-200 focus:border-primary focus:shadow-glow backdrop-blur-[20px]'\n  )\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"date-time-picker\"\n      className={cn('relative inline-block w-full', className)}\n    >\n      <div className=\"relative flex items-center\">\n        <input\n          type=\"text\"\n          readOnly\n          role=\"combobox\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-label=\"Date and time\"\n          placeholder={placeholder ?? `${format.toLowerCase()} hh:mm`}\n          className={cn(\n            'border-border-glass bg-glass text-foreground h-10 w-full cursor-pointer rounded-xl border px-4 pr-12 py-2 text-[13px] backdrop-blur-[20px]',\n            'placeholder:text-foreground-muted',\n            'transition-all duration-[250ms] outline-none',\n            'focus:border-primary focus:shadow-glow'\n          )}\n          value={displayValue}\n          onClick={() => setIsOpen(o => !o)}\n          onKeyDown={e => {\n            if (e.key === 'Escape' && isOpen) {\n              e.preventDefault()\n              setIsOpen(false)\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          aria-label=\"Open date time picker\"\n          onClick={e => {\n            e.stopPropagation()\n            setIsOpen(o => !o)\n          }}\n          className=\"absolute right-2 inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground\"\n        >\n          <CalendarIcon />\n        </button>\n      </div>\n\n      {isOpen && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"false\"\n          aria-label=\"Choose date and time\"\n          className={cn(\n            'absolute left-0 z-50 mt-2 rounded-xl border border-border-glass bg-glass p-3 shadow-lg backdrop-blur-[20px]',\n            'animate-in fade-in-0 zoom-in-95 slide-in-from-top-2'\n          )}\n        >\n          <Calendar\n            value={selectedDate}\n            mode=\"single\"\n            minDate={minDate}\n            maxDate={maxDate}\n            disabledDates={disabledDates}\n            weekStart={weekStart}\n            onChange={handleCalendarChange}\n          />\n\n          {/* Time controls */}\n          <div className=\"mt-3 flex items-center justify-center gap-1 border-t border-border-glass pt-3\">\n            <span className=\"mr-2 text-[12px] text-foreground-muted\">Time</span>\n            <input\n              type=\"number\"\n              aria-label=\"Hours\"\n              className={timeInputClass}\n              min={use24Hour ? 0 : 1}\n              max={use24Hour ? 23 : 12}\n              value={padTwo(hours)}\n              onChange={handleHourChange}\n            />\n            <span className=\"text-foreground-muted\" aria-hidden=\"true\">\n              :\n            </span>\n            <input\n              type=\"number\"\n              aria-label=\"Minutes\"\n              className={timeInputClass}\n              min={0}\n              max={59}\n              value={padTwo(minutes)}\n              onChange={handleMinuteChange}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { DatePicker, DateRangePicker, DateTimePicker }\n"],"mappings":"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"}

package/dist/react/primitives/detection-status.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export type DetectionRuleStatus = 'active' | 'disabled' | 'testing' | 'error';
+export type DetectionSeverity = 'critical' | 'high' | 'medium' | 'low' | 'info';
+export interface DetectionRule {
+    id: string;
+    name: string;
+    source: string;
+    status: DetectionRuleStatus;
+    lastTriggered?: Date | string;
+    triggerCount?: number;
+    severity?: DetectionSeverity;
+    tags?: string[];
+}
+declare const statusDotVariants: (props?: ({
+    status?: "active" | "error" | "disabled" | "testing" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const statusLabelVariants: (props?: ({
+    status?: "active" | "error" | "disabled" | "testing" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const severityBadgeVariants: (props?: ({
+    severity?: "info" | "high" | "low" | "critical" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DetectionStatusBadgeProps extends React.ComponentProps<'span'> {
+    status: DetectionRuleStatus;
+    /** Show the status icon. Defaults to true. */
+    showIcon?: boolean;
+    /** Show the text label. Defaults to true. */
+    showLabel?: boolean;
+}
+declare function DetectionStatusBadge({ className, status, showIcon, showLabel, ...props }: DetectionStatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export interface DetectionStatusRowProps extends Omit<React.ComponentProps<'div'>, 'onClick'> {
+    rule: DetectionRule;
+    onClick?: ((rule: DetectionRule) => void) | undefined;
+}
+declare function DetectionStatusRow({ className, rule, onClick, ...props }: DetectionStatusRowProps): import("react/jsx-runtime").JSX.Element;
+export interface DetectionStatusListProps extends React.ComponentProps<'div'> {
+    rules: DetectionRule[];
+    /** Show search input. */
+    showSearch?: boolean;
+    /** Show status/severity filter dropdowns. */
+    showFilters?: boolean;
+    /** Callback when a rule row is clicked. */
+    onRuleClick?: (rule: DetectionRule) => void;
+}
+declare function DetectionStatusList({ className, rules, showSearch, showFilters, onRuleClick, ...props }: DetectionStatusListProps): import("react/jsx-runtime").JSX.Element;
+export { DetectionStatusBadge, DetectionStatusRow, DetectionStatusList, statusDotVariants, statusLabelVariants, severityBadgeVariants, };
+//# sourceMappingURL=detection-status.d.ts.map

package/dist/react/primitives/detection-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detection-status.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/detection-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA;AAE7E,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAA;AAE/E,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,mBAAmB,CAAA;IAC3B,aAAa,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAChB;AA4BD,QAAA,MAAM,iBAAiB;;8EAYrB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;8EAYvB,CAAA;AAEF,QAAA,MAAM,qBAAqB;;8EAgB1B,CAAA;AAgFD,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IAC7E,MAAM,EAAE,mBAAmB,CAAA;IAC3B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,MAAM,EACN,QAAe,EACf,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAe3B;AAMD,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3F,IAAI,EAAE,aAAa,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACtD;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CA4D1F;AAMD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC3E,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;CAC5C;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,WAAmB,EACnB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,wBAAwB,2CA6F1B;AAED,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,CAAA"}