@countermeasure-platform/web-components 0.2.0

package/dist/react/primitives/detection-status.js

@@ -0,0 +1,284 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { t } from "../../dist-BCCeHAQm.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "react";
+//#region src/react/primitives/detection-status.tsx
+var o = {
+	active: "Active",
+	disabled: "Disabled",
+	testing: "Testing",
+	error: "Error"
+};
+function s(e) {
+	return (e instanceof Date ? e : new Date(e)).toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+var c = t("inline-block size-2 shrink-0 rounded-full", {
+	variants: { status: {
+		active: "bg-accent-emerald",
+		disabled: "bg-foreground-muted",
+		testing: "bg-accent-amber",
+		error: "bg-accent-rose"
+	} },
+	defaultVariants: { status: "active" }
+}), l = t("text-xs font-medium", {
+	variants: { status: {
+		active: "text-accent-emerald",
+		disabled: "text-foreground-muted",
+		testing: "text-accent-amber",
+		error: "text-accent-rose"
+	} },
+	defaultVariants: { status: "active" }
+}), u = t("inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-bold", {
+	variants: { severity: {
+		critical: "bg-accent-rose/15 text-accent-rose",
+		high: "bg-accent-rose/10 text-accent-rose/80",
+		medium: "bg-accent-amber/10 text-accent-amber",
+		low: "bg-accent-cyan/10 text-accent-cyan",
+		info: "bg-foreground-muted/10 text-foreground-secondary"
+	} },
+	defaultVariants: { severity: "info" }
+});
+function d({ status: t }) {
+	let n = "size-4";
+	switch (t) {
+		case "active": return /* @__PURE__ */ i("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: e(n, "text-accent-emerald"),
+			children: [/* @__PURE__ */ r("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" }), /* @__PURE__ */ r("path", { d: "m9 12 2 2 4-4" })]
+		});
+		case "disabled": return /* @__PURE__ */ i("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: e(n, "text-foreground-muted"),
+			children: [/* @__PURE__ */ r("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}), /* @__PURE__ */ r("line", {
+				x1: "4.93",
+				y1: "4.93",
+				x2: "19.07",
+				y2: "19.07"
+			})]
+		});
+		case "testing": return /* @__PURE__ */ r("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: e(n, "text-accent-amber"),
+			children: /* @__PURE__ */ r("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })
+		});
+		case "error": return /* @__PURE__ */ i("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: e(n, "text-accent-rose"),
+			children: [
+				/* @__PURE__ */ r("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+				/* @__PURE__ */ r("line", {
+					x1: "12",
+					y1: "9",
+					x2: "12",
+					y2: "13"
+				}),
+				/* @__PURE__ */ r("line", {
+					x1: "12",
+					y1: "17",
+					x2: "12.01",
+					y2: "17"
+				})
+			]
+		});
+	}
+}
+function f({ className: t, status: n, showIcon: a = !0, showLabel: s = !0, ...c }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "detection-status-badge",
+		role: "status",
+		"aria-label": `Status: ${o[n]}`,
+		className: e("inline-flex items-center gap-1.5", t),
+		...c,
+		children: [a && /* @__PURE__ */ r(d, { status: n }), s && /* @__PURE__ */ r("span", {
+			className: l({ status: n }),
+			children: o[n]
+		})]
+	});
+}
+function p({ className: t, rule: n, onClick: a, ...d }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "detection-status-row",
+		role: "listitem",
+		className: e("flex items-center gap-4 rounded-lg border border-border-glass bg-glass px-4 py-3 backdrop-blur-[20px]", "transition-all duration-200 hover:bg-glass-hover", a && "cursor-pointer", t),
+		onClick: a ? () => a(n) : void 0,
+		...d,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex min-w-0 flex-1 items-center gap-3",
+				children: [/* @__PURE__ */ r("span", {
+					"aria-hidden": "true",
+					className: c({ status: n.status })
+				}), /* @__PURE__ */ i("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ r("div", {
+						className: "truncate text-sm font-medium text-foreground",
+						children: n.name
+					}), /* @__PURE__ */ r("div", {
+						className: "truncate text-xs text-foreground-muted",
+						children: n.source
+					})]
+				})]
+			}),
+			n.severity && /* @__PURE__ */ r("span", {
+				className: u({ severity: n.severity }),
+				children: n.severity.charAt(0).toUpperCase() + n.severity.slice(1)
+			}),
+			/* @__PURE__ */ r("span", {
+				className: e(l({ status: n.status }), "shrink-0 text-xs"),
+				children: o[n.status]
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "shrink-0 text-xs tabular-nums text-foreground-secondary",
+				children: n.triggerCount ?? 0
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "shrink-0 text-xs text-foreground-muted",
+				children: n.lastTriggered ? s(n.lastTriggered) : "Never"
+			}),
+			n.tags && n.tags.length > 0 && /* @__PURE__ */ r("div", {
+				className: "hidden items-center gap-1 lg:flex",
+				children: n.tags.map((e) => /* @__PURE__ */ r("span", {
+					className: "rounded-full border border-border-glass bg-surface-secondary px-2 py-0.5 text-[10px] text-foreground-muted",
+					children: e
+				}, e))
+			})
+		]
+	});
+}
+function m({ className: t, rules: o, showSearch: s = !1, showFilters: c = !1, onRuleClick: l, ...u }) {
+	let [d, f] = a.useState(""), [m, h] = a.useState("all"), [g, _] = a.useState("all"), v = a.useMemo(() => {
+		let e = o;
+		if (m !== "all" && (e = e.filter((e) => e.status === m)), g !== "all" && (e = e.filter((e) => e.severity === g)), d.length > 0) {
+			let t = d.toLowerCase();
+			e = e.filter((e) => e.name.toLowerCase().includes(t) || e.source.toLowerCase().includes(t));
+		}
+		return e;
+	}, [
+		o,
+		m,
+		g,
+		d
+	]), y = "rounded-lg border border-border-glass bg-glass px-3 py-1.5 text-xs text-foreground backdrop-blur-[20px] outline-none focus:ring-1 focus:ring-accent-cyan/40";
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "detection-status-list",
+		className: e("flex flex-col gap-3", t),
+		...u,
+		children: [(s || c) && /* @__PURE__ */ i("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [s && /* @__PURE__ */ r("input", {
+				type: "text",
+				placeholder: "Search rules...",
+				"aria-label": "Search detection rules",
+				value: d,
+				onChange: (e) => f(e.target.value),
+				className: e("flex-1 rounded-lg border border-border-glass bg-glass px-3 py-1.5 text-sm text-foreground backdrop-blur-[20px]", "placeholder:text-foreground-muted outline-none focus:ring-1 focus:ring-accent-cyan/40")
+			}), c && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("select", {
+				"aria-label": "Filter by status",
+				value: m,
+				onChange: (e) => h(e.target.value),
+				className: y,
+				children: [
+					/* @__PURE__ */ r("option", {
+						value: "all",
+						children: "All Statuses"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "active",
+						children: "Active"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "disabled",
+						children: "Disabled"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "testing",
+						children: "Testing"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "error",
+						children: "Error"
+					})
+				]
+			}), /* @__PURE__ */ i("select", {
+				"aria-label": "Filter by severity",
+				value: g,
+				onChange: (e) => _(e.target.value),
+				className: y,
+				children: [
+					/* @__PURE__ */ r("option", {
+						value: "all",
+						children: "All Severities"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "critical",
+						children: "Critical"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "high",
+						children: "High"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "medium",
+						children: "Medium"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "low",
+						children: "Low"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "info",
+						children: "Info"
+					})
+				]
+			})] })]
+		}), /* @__PURE__ */ r("div", {
+			role: "list",
+			className: "flex flex-col gap-2",
+			children: v.length === 0 ? /* @__PURE__ */ r("div", {
+				className: "rounded-lg border border-border-glass bg-glass px-4 py-8 text-center text-sm text-foreground-muted backdrop-blur-[20px]",
+				children: "No detection rules found"
+			}) : v.map((e) => /* @__PURE__ */ r(p, {
+				rule: e,
+				onClick: l ?? void 0
+			}, e.id))
+		})]
+	});
+}
+//#endregion
+export { f as DetectionStatusBadge, m as DetectionStatusList, p as DetectionStatusRow, u as severityBadgeVariants, c as statusDotVariants, l as statusLabelVariants };
+
+//# sourceMappingURL=detection-status.js.map

package/dist/react/primitives/detection-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detection-status.js","names":[],"sources":["../../../src/react/primitives/detection-status.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\n\nimport { cn } from './utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport type DetectionRuleStatus = 'active' | 'disabled' | 'testing' | 'error'\n\nexport type DetectionSeverity = 'critical' | 'high' | 'medium' | 'low' | 'info'\n\nexport interface DetectionRule {\n  id: string\n  name: string\n  source: string\n  status: DetectionRuleStatus\n  lastTriggered?: Date | string\n  triggerCount?: number\n  severity?: DetectionSeverity\n  tags?: string[]\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nconst STATUS_LABELS: Record<DetectionRuleStatus, string> = {\n  active: 'Active',\n  disabled: 'Disabled',\n  testing: 'Testing',\n  error: 'Error',\n}\n\nfunction formatDate(value: Date | string): string {\n  const d = value instanceof Date ? value : new Date(value)\n  return d.toLocaleDateString(undefined, {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n  })\n}\n\n/* ------------------------------------------------------------------ */\n/*  Variants                                                           */\n/* ------------------------------------------------------------------ */\n\nconst statusDotVariants = cva('inline-block size-2 shrink-0 rounded-full', {\n  variants: {\n    status: {\n      active: 'bg-accent-emerald',\n      disabled: 'bg-foreground-muted',\n      testing: 'bg-accent-amber',\n      error: 'bg-accent-rose',\n    },\n  },\n  defaultVariants: {\n    status: 'active',\n  },\n})\n\nconst statusLabelVariants = cva('text-xs font-medium', {\n  variants: {\n    status: {\n      active: 'text-accent-emerald',\n      disabled: 'text-foreground-muted',\n      testing: 'text-accent-amber',\n      error: 'text-accent-rose',\n    },\n  },\n  defaultVariants: {\n    status: 'active',\n  },\n})\n\nconst severityBadgeVariants = cva(\n  'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-bold',\n  {\n    variants: {\n      severity: {\n        critical: 'bg-accent-rose/15 text-accent-rose',\n        high: 'bg-accent-rose/10 text-accent-rose/80',\n        medium: 'bg-accent-amber/10 text-accent-amber',\n        low: 'bg-accent-cyan/10 text-accent-cyan',\n        info: 'bg-foreground-muted/10 text-foreground-secondary',\n      },\n    },\n    defaultVariants: {\n      severity: 'info',\n    },\n  }\n)\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\nfunction StatusIcon({ status }: { status: DetectionRuleStatus }) {\n  const iconClass = 'size-4'\n  switch (status) {\n    case 'active':\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={cn(iconClass, 'text-accent-emerald')}\n        >\n          <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\" />\n          <path d=\"m9 12 2 2 4-4\" />\n        </svg>\n      )\n    case 'disabled':\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={cn(iconClass, 'text-foreground-muted')}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"4.93\" y1=\"4.93\" x2=\"19.07\" y2=\"19.07\" />\n        </svg>\n      )\n    case 'testing':\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={cn(iconClass, 'text-accent-amber')}\n        >\n          <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\" />\n        </svg>\n      )\n    case 'error':\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={cn(iconClass, 'text-accent-rose')}\n        >\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\" />\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n        </svg>\n      )\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  DetectionStatusBadge (single rule inline indicator)                */\n/* ------------------------------------------------------------------ */\n\nexport interface DetectionStatusBadgeProps extends React.ComponentProps<'span'> {\n  status: DetectionRuleStatus\n  /** Show the status icon. Defaults to true. */\n  showIcon?: boolean\n  /** Show the text label. Defaults to true. */\n  showLabel?: boolean\n}\n\nfunction DetectionStatusBadge({\n  className,\n  status,\n  showIcon = true,\n  showLabel = true,\n  ...props\n}: DetectionStatusBadgeProps) {\n  return (\n    <span\n      data-slot=\"detection-status-badge\"\n      role=\"status\"\n      aria-label={`Status: ${STATUS_LABELS[status]}`}\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    >\n      {showIcon && <StatusIcon status={status} />}\n      {showLabel && (\n        <span className={statusLabelVariants({ status })}>{STATUS_LABELS[status]}</span>\n      )}\n    </span>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  DetectionStatusRow (single rule row for use inside a list/table)   */\n/* ------------------------------------------------------------------ */\n\nexport interface DetectionStatusRowProps extends Omit<React.ComponentProps<'div'>, 'onClick'> {\n  rule: DetectionRule\n  onClick?: ((rule: DetectionRule) => void) | undefined\n}\n\nfunction DetectionStatusRow({ className, rule, onClick, ...props }: DetectionStatusRowProps) {\n  return (\n    <div\n      data-slot=\"detection-status-row\"\n      role=\"listitem\"\n      className={cn(\n        'flex items-center gap-4 rounded-lg border border-border-glass bg-glass px-4 py-3 backdrop-blur-[20px]',\n        'transition-all duration-200 hover:bg-glass-hover',\n        onClick && 'cursor-pointer',\n        className\n      )}\n      onClick={onClick ? () => onClick(rule) : undefined}\n      {...props}\n    >\n      {/* Status dot + name */}\n      <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n        <span aria-hidden=\"true\" className={statusDotVariants({ status: rule.status })} />\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"truncate text-sm font-medium text-foreground\">{rule.name}</div>\n          <div className=\"truncate text-xs text-foreground-muted\">{rule.source}</div>\n        </div>\n      </div>\n\n      {/* Severity */}\n      {rule.severity && (\n        <span className={severityBadgeVariants({ severity: rule.severity })}>\n          {rule.severity.charAt(0).toUpperCase() + rule.severity.slice(1)}\n        </span>\n      )}\n\n      {/* Status label */}\n      <span className={cn(statusLabelVariants({ status: rule.status }), 'shrink-0 text-xs')}>\n        {STATUS_LABELS[rule.status]}\n      </span>\n\n      {/* Trigger count */}\n      <span className=\"shrink-0 text-xs tabular-nums text-foreground-secondary\">\n        {rule.triggerCount ?? 0}\n      </span>\n\n      {/* Last triggered */}\n      <span className=\"shrink-0 text-xs text-foreground-muted\">\n        {rule.lastTriggered ? formatDate(rule.lastTriggered) : 'Never'}\n      </span>\n\n      {/* Tags */}\n      {rule.tags && rule.tags.length > 0 && (\n        <div className=\"hidden items-center gap-1 lg:flex\">\n          {rule.tags.map(tag => (\n            <span\n              key={tag}\n              className=\"rounded-full border border-border-glass bg-surface-secondary px-2 py-0.5 text-[10px] text-foreground-muted\"\n            >\n              {tag}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  DetectionStatusList (full list with optional search/filters)       */\n/* ------------------------------------------------------------------ */\n\nexport interface DetectionStatusListProps extends React.ComponentProps<'div'> {\n  rules: DetectionRule[]\n  /** Show search input. */\n  showSearch?: boolean\n  /** Show status/severity filter dropdowns. */\n  showFilters?: boolean\n  /** Callback when a rule row is clicked. */\n  onRuleClick?: (rule: DetectionRule) => void\n}\n\nfunction DetectionStatusList({\n  className,\n  rules,\n  showSearch = false,\n  showFilters = false,\n  onRuleClick,\n  ...props\n}: DetectionStatusListProps) {\n  const [search, setSearch] = React.useState('')\n  const [statusFilter, setStatusFilter] = React.useState<DetectionRuleStatus | 'all'>('all')\n  const [severityFilter, setSeverityFilter] = React.useState<DetectionSeverity | 'all'>('all')\n\n  const filtered = React.useMemo(() => {\n    let result = rules\n    if (statusFilter !== 'all') {\n      result = result.filter(r => r.status === statusFilter)\n    }\n    if (severityFilter !== 'all') {\n      result = result.filter(r => r.severity === severityFilter)\n    }\n    if (search.length > 0) {\n      const q = search.toLowerCase()\n      result = result.filter(\n        r => r.name.toLowerCase().includes(q) || r.source.toLowerCase().includes(q)\n      )\n    }\n    return result\n  }, [rules, statusFilter, severityFilter, search])\n\n  const selectClass =\n    'rounded-lg border border-border-glass bg-glass px-3 py-1.5 text-xs text-foreground backdrop-blur-[20px] outline-none focus:ring-1 focus:ring-accent-cyan/40'\n\n  return (\n    <div\n      data-slot=\"detection-status-list\"\n      className={cn('flex flex-col gap-3', className)}\n      {...props}\n    >\n      {/* Controls */}\n      {(showSearch || showFilters) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {showSearch && (\n            <input\n              type=\"text\"\n              placeholder=\"Search rules...\"\n              aria-label=\"Search detection rules\"\n              value={search}\n              onChange={e => setSearch(e.target.value)}\n              className={cn(\n                'flex-1 rounded-lg border border-border-glass bg-glass px-3 py-1.5 text-sm text-foreground backdrop-blur-[20px]',\n                'placeholder:text-foreground-muted outline-none focus:ring-1 focus:ring-accent-cyan/40'\n              )}\n            />\n          )}\n          {showFilters && (\n            <>\n              <select\n                aria-label=\"Filter by status\"\n                value={statusFilter}\n                onChange={e => setStatusFilter(e.target.value as DetectionRuleStatus | 'all')}\n                className={selectClass}\n              >\n                <option value=\"all\">All Statuses</option>\n                <option value=\"active\">Active</option>\n                <option value=\"disabled\">Disabled</option>\n                <option value=\"testing\">Testing</option>\n                <option value=\"error\">Error</option>\n              </select>\n              <select\n                aria-label=\"Filter by severity\"\n                value={severityFilter}\n                onChange={e => setSeverityFilter(e.target.value as DetectionSeverity | 'all')}\n                className={selectClass}\n              >\n                <option value=\"all\">All Severities</option>\n                <option value=\"critical\">Critical</option>\n                <option value=\"high\">High</option>\n                <option value=\"medium\">Medium</option>\n                <option value=\"low\">Low</option>\n                <option value=\"info\">Info</option>\n              </select>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Rule rows */}\n      <div role=\"list\" className=\"flex flex-col gap-2\">\n        {filtered.length === 0 ? (\n          <div className=\"rounded-lg border border-border-glass bg-glass px-4 py-8 text-center text-sm text-foreground-muted backdrop-blur-[20px]\">\n            No detection rules found\n          </div>\n        ) : (\n          filtered.map(rule => (\n            <DetectionStatusRow key={rule.id} rule={rule} onClick={onRuleClick ?? undefined} />\n          ))\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport {\n  DetectionStatusBadge,\n  DetectionStatusRow,\n  DetectionStatusList,\n  statusDotVariants,\n  statusLabelVariants,\n  severityBadgeVariants,\n}\n"],"mappings":"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"}

package/dist/react/primitives/dialog.d.ts

@@ -0,0 +1,16 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/react/primitives/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAExF;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAEtF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,2CAyBA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/react/primitives/dialog.js

@@ -0,0 +1,87 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { a as t, c as n, i as r, n as i, o as a, r as o, s, t as c } from "../../dist-Di-HnAlt.js";
+import { t as l } from "../../x-DCVjAtEF.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import "react";
+//#region src/react/primitives/dialog.tsx
+function f({ ...e }) {
+	return /* @__PURE__ */ u(a, {
+		"data-slot": "dialog",
+		...e
+	});
+}
+function p({ ...e }) {
+	return /* @__PURE__ */ u(n, {
+		"data-slot": "dialog-trigger",
+		...e
+	});
+}
+function m({ ...e }) {
+	return /* @__PURE__ */ u(t, {
+		"data-slot": "dialog-portal",
+		...e
+	});
+}
+function h({ ...e }) {
+	return /* @__PURE__ */ u(c, {
+		"data-slot": "dialog-close",
+		...e
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ u(r, {
+		"data-slot": "dialog-overlay",
+		className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm", t),
+		...n
+	});
+}
+function _({ className: t, children: n, showCloseButton: r = !0, ...a }) {
+	return /* @__PURE__ */ d(m, {
+		"data-slot": "dialog-portal",
+		children: [/* @__PURE__ */ u(g, {}), /* @__PURE__ */ d(i, {
+			"data-slot": "dialog-content",
+			className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg", t),
+			...a,
+			children: [n, r && /* @__PURE__ */ d(c, {
+				"data-slot": "dialog-close",
+				className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				children: [/* @__PURE__ */ u(l, {}), /* @__PURE__ */ u("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})]
+	});
+}
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ u("div", {
+		"data-slot": "dialog-header",
+		className: e("flex flex-col gap-2 text-center sm:text-left", t),
+		...n
+	});
+}
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ u("div", {
+		"data-slot": "dialog-footer",
+		className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+		...n
+	});
+}
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ u(s, {
+		"data-slot": "dialog-title",
+		className: e("text-lg leading-none font-semibold", t),
+		...n
+	});
+}
+function x({ className: t, ...n }) {
+	return /* @__PURE__ */ u(o, {
+		"data-slot": "dialog-description",
+		className: e("text-muted-foreground text-sm", t),
+		...n
+	});
+}
+//#endregion
+export { f as Dialog, h as DialogClose, _ as DialogContent, x as DialogDescription, y as DialogFooter, v as DialogHeader, g as DialogOverlay, m as DialogPortal, b as DialogTitle, p as DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/react/primitives/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../src/react/primitives/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { XIcon } from 'lucide-react'\nimport * as React from 'react'\n\nimport { cn } from './utils'\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;AAMA,SAAS,EAAO,EAAE,GAAG,KAA4D;AAC/E,QAAO,kBAAC,GAAD;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,EAAc,EAAE,GAAG,KAA+D;AACzF,QAAO,kBAAC,GAAD;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,EAAa,EAAE,GAAG,KAA8D;AACvF,QAAO,kBAAC,GAAD;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,EAAY,EAAE,GAAG,KAA6D;AACrF,QAAO,kBAAC,GAAD;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,EAAc,EACrB,cACA,GAAG,KACoD;AACvD,QACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,2KACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAc,EACrB,cACA,aACA,qBAAkB,IAClB,GAAG,KAGF;AACD,QACE,kBAAC,GAAD;EAAc,aAAU;YAAxB,CACE,kBAAC,GAAD,EAAiB,CAAA,EACjB,kBAAC,GAAD;GACE,aAAU;GACV,WAAW,EACT,4XACA,EACD;GACD,GAAI;aANN,CAQG,GACA,KACC,kBAAC,GAAD;IACE,aAAU;IACV,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAS,CAAA,EACT,kBAAC,QAAD;KAAM,WAAU;eAAU;KAAY,CAAA,CAChB;MAEF;KACb;;;AAInB,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;AAC1E,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,gDAAgD,EAAU;EACxE,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;AAC1E,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,0DAA0D,EAAU;EAClF,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,cAAW,GAAG,KAA6D;AAChG,QACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EAAG,sCAAsC,EAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAkB,EACzB,cACA,GAAG,KACwD;AAC3D,QACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,EAAU;EACzD,GAAI;EACJ,CAAA"}

package/dist/react/primitives/direction.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type DirectionValue = 'ltr' | 'rtl' | 'auto';
+export interface DirectionContextValue {
+    /** Current direction */
+    direction: DirectionValue;
+    /** Update the direction */
+    setDirection: (dir: DirectionValue) => void;
+}
+declare const DirectionContext: React.Context<DirectionContextValue>;
+export interface DirectionProviderProps {
+    /** Initial direction value */
+    direction?: DirectionValue;
+    /** Children to wrap */
+    children: React.ReactNode;
+    /** Callback when direction changes */
+    onChange?: (direction: DirectionValue) => void;
+}
+declare function DirectionProvider({ direction: directionProp, children, onChange, }: DirectionProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useDirection(): DirectionContextValue;
+export { DirectionProvider, useDirection, DirectionContext };
+//# sourceMappingURL=direction.d.ts.map

package/dist/react/primitives/direction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/direction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnD,MAAM,WAAW,qBAAqB;IACpC,wBAAwB;IACxB,SAAS,EAAE,cAAc,CAAA;IACzB,2BAA2B;IAC3B,YAAY,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;CAC5C;AAED,QAAA,MAAM,gBAAgB,sCAGpB,CAAA;AAEF,MAAM,WAAW,sBAAsB;IACrC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAA;CAC/C;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EAAE,aAAqB,EAChC,QAAQ,EACR,QAAQ,GACT,EAAE,sBAAsB,2CAsCxB;AAED,iBAAS,YAAY,IAAI,qBAAqB,CAE7C;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/react/primitives/direction.js

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+//#region src/react/primitives/direction.tsx
+var n = t.createContext({
+	direction: "ltr",
+	setDirection: () => {}
+});
+function r({ direction: r = "ltr", children: i, onChange: a }) {
+	let [o, s] = t.useState(r);
+	t.useEffect(() => {
+		s(r);
+	}, [r]), t.useEffect(() => {
+		let e = document.documentElement, t = new MutationObserver(() => {
+			let t = e.getAttribute("dir");
+			(t === "ltr" || t === "rtl" || t === "auto") && (s(t), a?.(t));
+		});
+		return t.observe(e, {
+			attributes: !0,
+			attributeFilter: ["dir"]
+		}), () => t.disconnect();
+	}, [a]);
+	let c = t.useCallback((e) => {
+		s(e), a?.(e);
+	}, [a]), l = t.useMemo(() => ({
+		direction: o,
+		setDirection: c
+	}), [o, c]);
+	return /* @__PURE__ */ e(n.Provider, {
+		value: l,
+		children: /* @__PURE__ */ e("div", {
+			"data-slot": "direction-provider",
+			dir: o,
+			children: i
+		})
+	});
+}
+function i() {
+	return t.useContext(n);
+}
+//#endregion
+export { n as DirectionContext, r as DirectionProvider, i as useDirection };
+
+//# sourceMappingURL=direction.js.map

package/dist/react/primitives/direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.js","names":[],"sources":["../../../src/react/primitives/direction.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DirectionValue = 'ltr' | 'rtl' | 'auto'\n\nexport interface DirectionContextValue {\n  /** Current direction */\n  direction: DirectionValue\n  /** Update the direction */\n  setDirection: (dir: DirectionValue) => void\n}\n\nconst DirectionContext = React.createContext<DirectionContextValue>({\n  direction: 'ltr',\n  setDirection: () => {},\n})\n\nexport interface DirectionProviderProps {\n  /** Initial direction value */\n  direction?: DirectionValue\n  /** Children to wrap */\n  children: React.ReactNode\n  /** Callback when direction changes */\n  onChange?: (direction: DirectionValue) => void\n}\n\nfunction DirectionProvider({\n  direction: directionProp = 'ltr',\n  children,\n  onChange,\n}: DirectionProviderProps) {\n  const [direction, setDirectionState] = React.useState<DirectionValue>(directionProp)\n\n  React.useEffect(() => {\n    setDirectionState(directionProp)\n  }, [directionProp])\n\n  // Observe changes to the html dir attribute\n  React.useEffect(() => {\n    const htmlEl = document.documentElement\n    const observer = new MutationObserver(() => {\n      const dir = htmlEl.getAttribute('dir') as DirectionValue | null\n      if (dir === 'ltr' || dir === 'rtl' || dir === 'auto') {\n        setDirectionState(dir)\n        onChange?.(dir)\n      }\n    })\n    observer.observe(htmlEl, { attributes: true, attributeFilter: ['dir'] })\n    return () => observer.disconnect()\n  }, [onChange])\n\n  const setDirection = React.useCallback(\n    (dir: DirectionValue) => {\n      setDirectionState(dir)\n      onChange?.(dir)\n    },\n    [onChange]\n  )\n\n  const contextValue = React.useMemo(() => ({ direction, setDirection }), [direction, setDirection])\n\n  return (\n    <DirectionContext.Provider value={contextValue}>\n      <div data-slot=\"direction-provider\" dir={direction}>\n        {children}\n      </div>\n    </DirectionContext.Provider>\n  )\n}\n\nfunction useDirection(): DirectionContextValue {\n  return React.useContext(DirectionContext)\n}\n\nexport { DirectionProvider, useDirection, DirectionContext }\n"],"mappings":";;;AAWA,IAAM,IAAmB,EAAM,cAAqC;CAClE,WAAW;CACX,oBAAoB;CACrB,CAAC;AAWF,SAAS,EAAkB,EACzB,WAAW,IAAgB,OAC3B,aACA,eACyB;CACzB,IAAM,CAAC,GAAW,KAAqB,EAAM,SAAyB,EAAc;AAOpF,CALA,EAAM,gBAAgB;AACpB,IAAkB,EAAc;IAC/B,CAAC,EAAc,CAAC,EAGnB,EAAM,gBAAgB;EACpB,IAAM,IAAS,SAAS,iBAClB,IAAW,IAAI,uBAAuB;GAC1C,IAAM,IAAM,EAAO,aAAa,MAAM;AACtC,IAAI,MAAQ,SAAS,MAAQ,SAAS,MAAQ,YAC5C,EAAkB,EAAI,EACtB,IAAW,EAAI;IAEjB;AAEF,SADA,EAAS,QAAQ,GAAQ;GAAE,YAAY;GAAM,iBAAiB,CAAC,MAAM;GAAE,CAAC,QAC3D,EAAS,YAAY;IACjC,CAAC,EAAS,CAAC;CAEd,IAAM,IAAe,EAAM,aACxB,MAAwB;AAEvB,EADA,EAAkB,EAAI,EACtB,IAAW,EAAI;IAEjB,CAAC,EAAS,CACX,EAEK,IAAe,EAAM,eAAe;EAAE;EAAW;EAAc,GAAG,CAAC,GAAW,EAAa,CAAC;AAElG,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GAAK,aAAU;GAAqB,KAAK;GACtC;GACG,CAAA;EACoB,CAAA;;AAIhC,SAAS,IAAsC;AAC7C,QAAO,EAAM,WAAW,EAAiB"}

package/dist/react/primitives/drawer.d.ts

@@ -0,0 +1,16 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+declare function Drawer({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, side, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/react/primitives/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAExF;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAEtF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAC3C,2CAmCA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/react/primitives/drawer.js

@@ -0,0 +1,88 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { a as t, c as n, i as r, n as i, o as a, r as o, s, t as c } from "../../dist-Di-HnAlt.js";
+import { t as l } from "../../x-DCVjAtEF.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import "react";
+//#region src/react/primitives/drawer.tsx
+function f({ ...e }) {
+	return /* @__PURE__ */ u(a, {
+		"data-slot": "drawer",
+		...e
+	});
+}
+function p({ ...e }) {
+	return /* @__PURE__ */ u(n, {
+		"data-slot": "drawer-trigger",
+		...e
+	});
+}
+function m({ ...e }) {
+	return /* @__PURE__ */ u(t, {
+		"data-slot": "drawer-portal",
+		...e
+	});
+}
+function h({ ...e }) {
+	return /* @__PURE__ */ u(c, {
+		"data-slot": "drawer-close",
+		...e
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ u(r, {
+		"data-slot": "drawer-overlay",
+		className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm", t),
+		...n
+	});
+}
+function _({ className: t, children: n, side: r = "bottom", ...a }) {
+	return /* @__PURE__ */ d(m, { children: [/* @__PURE__ */ u(g, {}), /* @__PURE__ */ d(i, {
+		"data-slot": "drawer-content",
+		className: e("bg-background fixed z-50 flex flex-col gap-4 shadow-lg outline-none transition duration-300 ease-in-out", "data-[state=open]:animate-in data-[state=closed]:animate-out", r === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 mt-24 max-h-[96vh] rounded-t-xl border-t", r === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 mb-24 max-h-[96vh] rounded-b-xl border-b", r === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 max-w-sm border-r", r === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 max-w-sm border-l", t),
+		...a,
+		children: [
+			(r === "bottom" || r === "top") && /* @__PURE__ */ u("div", { className: "mx-auto mt-4 h-1.5 w-12 shrink-0 rounded-full bg-border-glass" }),
+			n,
+			/* @__PURE__ */ d(c, {
+				"data-slot": "drawer-close",
+				className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+				children: [/* @__PURE__ */ u(l, { className: "size-4" }), /* @__PURE__ */ u("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		]
+	})] });
+}
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ u("div", {
+		"data-slot": "drawer-header",
+		className: e("flex flex-col gap-1.5 px-6 pt-2", t),
+		...n
+	});
+}
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ u("div", {
+		"data-slot": "drawer-footer",
+		className: e("border-border-glass/50 flex items-center justify-end gap-2 border-t px-6 py-4", t),
+		...n
+	});
+}
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ u(s, {
+		"data-slot": "drawer-title",
+		className: e("text-foreground text-lg font-semibold", t),
+		...n
+	});
+}
+function x({ className: t, ...n }) {
+	return /* @__PURE__ */ u(o, {
+		"data-slot": "drawer-description",
+		className: e("text-foreground-secondary text-sm", t),
+		...n
+	});
+}
+//#endregion
+export { f as Drawer, h as DrawerClose, _ as DrawerContent, x as DrawerDescription, y as DrawerFooter, v as DrawerHeader, g as DrawerOverlay, m as DrawerPortal, b as DrawerTitle, p as DrawerTrigger };
+
+//# sourceMappingURL=drawer.js.map