@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

package/dist/components/DatePicker/index.js

@@ -0,0 +1,248 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as t } from "../Button/index.js";
+/* empty css                          */
+import { Popover as n } from "../Popover/index.js";
+import { forwardRef as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/DatePicker/index.tsx
+function u(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var d = [
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat",
+	"Sun"
+];
+function f(e) {
+	let t = `${e.getMonth() + 1}`.padStart(2, "0"), n = `${e.getDate()}`.padStart(2, "0");
+	return `${e.getFullYear()}-${t}-${n}`;
+}
+function p(e) {
+	if (!e || !/^\d{4}-\d{2}-\d{2}$/.test(e)) return null;
+	let [t, n, r] = e.split("-").map(Number);
+	if (!t || !n || !r) return null;
+	let i = new Date(t, n - 1, r);
+	return Number.isNaN(i.getTime()) || f(i) !== e ? null : i;
+}
+function m(e) {
+	let t = p(e);
+	return t ? t.toLocaleDateString("en-GB", {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	}) : "";
+}
+function h(e) {
+	return e.toLocaleDateString("en-GB", {
+		month: "long",
+		year: "numeric"
+	});
+}
+function g(e) {
+	let t = new Date(e.getFullYear(), e.getMonth(), 1), n = (t.getDay() + 6) % 7;
+	return new Date(t.getFullYear(), t.getMonth(), 1 - n);
+}
+var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, className: v, ...y }, b) {
+	let x = p(e), [S, C] = s(() => x ?? /* @__PURE__ */ new Date()), [w, T] = s(() => e ?? f(/* @__PURE__ */ new Date())), E = o(null), D = o(!1);
+	i(() => {
+		let t = p(e);
+		t && (T(e), C(new Date(t.getFullYear(), t.getMonth(), 1)));
+	}, [e]), i(() => {
+		D.current && (D.current = !1, E.current?.querySelector("[data-focused]")?.focus());
+	}, [w]);
+	let O = Array.from({ length: 42 }, (e, t) => {
+		let n = g(S);
+		return new Date(n.getFullYear(), n.getMonth(), n.getDate() + t);
+	}), k = f(/* @__PURE__ */ new Date()), A = (e) => {
+		let t = new Date(S.getFullYear(), S.getMonth() + e, 1);
+		C(t), T(f(t));
+	}, j = (e) => {
+		let t = p(w) ?? /* @__PURE__ */ new Date(), n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + e);
+		D.current = !0, T(f(n)), C(new Date(n.getFullYear(), n.getMonth(), 1));
+	}, M = (e) => {
+		let t = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7,
+			PageUp: -28,
+			PageDown: 28
+		}[e.key];
+		t !== void 0 && (e.preventDefault(), j(t));
+	};
+	return /* @__PURE__ */ l("div", {
+		ref: b,
+		className: u("ds-calendar", v),
+		...y,
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "ds-calendar__head",
+				children: [
+					/* @__PURE__ */ c(t, {
+						variant: "simple",
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: "chevron-left",
+						"aria-label": "Previous month",
+						onClick: () => A(-1)
+					}),
+					/* @__PURE__ */ c("span", {
+						className: "ds-calendar__month",
+						children: h(S)
+					}),
+					/* @__PURE__ */ c(t, {
+						variant: "simple",
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: "chevron-right",
+						"aria-label": "Next month",
+						onClick: () => A(1)
+					})
+				]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "ds-calendar__weekdays",
+				"aria-hidden": "true",
+				children: d.map((e) => /* @__PURE__ */ c("span", { children: e.slice(0, 2) }, e))
+			}),
+			/* @__PURE__ */ c("div", {
+				ref: E,
+				className: "ds-calendar__grid",
+				role: "grid",
+				onKeyDown: M,
+				children: Array.from({ length: 6 }, (t, i) => /* @__PURE__ */ c("div", {
+					role: "row",
+					className: "ds-calendar__row",
+					children: O.slice(i * 7, i * 7 + 7).map((t) => {
+						let i = f(t), o = t.getMonth() !== S.getMonth(), s = a && i < a || _ && i > _, l = !!(e && n && i > e && i < n), u = i === e || i === n;
+						return /* @__PURE__ */ c("button", {
+							type: "button",
+							role: "gridcell",
+							"aria-label": m(i),
+							tabIndex: i === w ? 0 : -1,
+							disabled: s || void 0,
+							"aria-selected": u || void 0,
+							"data-outside": o || void 0,
+							"data-today": i === k || void 0,
+							"data-in-range": l || void 0,
+							"data-focused": i === w || void 0,
+							className: "ds-calendar__day",
+							onClick: () => {
+								T(i), r?.(i);
+							},
+							children: t.getDate()
+						}, i);
+					})
+				}, i))
+			})
+		]
+	});
+});
+function v({ value: t, defaultValue: r = "", onValueChange: d, size: f = "md", placeholder: p = "Pick a date", min: h, max: g, isDisabled: v = !1, isInvalid: y = !1, "aria-invalid": b, id: x, className: S, ...C }) {
+	let [w, T] = s(r), E = t ?? w, [D, O] = s(!1), k = o(null), A = o(null), j = o(null), M = a(), N = x ?? M;
+	return i(() => {
+		if (!D) return;
+		let e = (e) => {
+			let t = e.target;
+			!k.current?.contains(t) && !j.current?.contains(t) && O(!1);
+		}, t = (e) => {
+			e.key === "Escape" && (O(!1), A.current?.focus());
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [D]), /* @__PURE__ */ l("div", {
+		className: u("ds-datefield", S),
+		ref: k,
+		children: [/* @__PURE__ */ l("button", {
+			...C,
+			ref: A,
+			id: N,
+			type: "button",
+			"aria-haspopup": "dialog",
+			"aria-expanded": D,
+			"aria-invalid": y || b || void 0,
+			disabled: v,
+			"data-size": f,
+			"data-placeholder": E ? void 0 : "",
+			className: "ds-field-skin ds-datefield__control",
+			onClick: () => O((e) => !e),
+			children: [/* @__PURE__ */ c("span", {
+				className: "ds-datefield__value",
+				children: E ? m(E) : p
+			}), /* @__PURE__ */ c(e, {
+				name: "calendar",
+				size: 16,
+				className: "ds-datefield__glyph"
+			})]
+		}), /* @__PURE__ */ c(n, {
+			anchorRef: A,
+			anchorId: N,
+			isOpen: D,
+			panelRef: j,
+			className: "ds-datefield__popover",
+			role: "dialog",
+			"aria-label": "Choose a date",
+			children: /* @__PURE__ */ c(_, {
+				value: E,
+				min: h,
+				max: g,
+				onSelect: (e) => {
+					t === void 0 && T(e), d?.(e), O(!1), A.current?.focus();
+				}
+			})
+		})]
+	});
+}
+function y({ value: e, defaultValue: t = {
+	start: "",
+	end: ""
+}, onValueChange: n, size: r = "md", min: i, max: a, isDisabled: o = !1, startLabel: d = "Start date", endLabel: f = "End date", className: p }) {
+	let [m, h] = s(t), g = e ?? m, _ = (t) => {
+		e === void 0 && h(t), n?.(t);
+	};
+	return /* @__PURE__ */ l("div", {
+		className: u("ds-daterange", p),
+		children: [
+			/* @__PURE__ */ c(v, {
+				"aria-label": d,
+				size: r,
+				value: g.start,
+				min: i,
+				max: g.end || a,
+				isDisabled: o,
+				placeholder: d,
+				onValueChange: (e) => _({
+					...g,
+					start: e
+				})
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "ds-daterange__dash",
+				"aria-hidden": "true",
+				children: "–"
+			}),
+			/* @__PURE__ */ c(v, {
+				"aria-label": f,
+				size: r,
+				value: g.end,
+				min: g.start || i,
+				max: a,
+				isDisabled: o,
+				placeholder: f,
+				onValueChange: (e) => _({
+					...g,
+					end: e
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { _ as Calendar, v as DateField, y as DateRangeField, m as formatIsoDate };
+
+//# sourceMappingURL=index.js.map

package/dist/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","Calendar","forwardRef","rest","selected","setMonth","useState","focused","setFocused","gridRef","useRef","shouldFocus","useEffect","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","Button","rowIndex","iso","isOutside","isDisabled","min","max","inRange","endValue","isEdge","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","useId","triggerId","id","onPointerDown","target","isInvalid","size","open","placeholder","Popover","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n  const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n  const day = `${date.getDate()}`.padStart(2, \"0\");\n  return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n  if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n  const [year, month, day] = value.split(\"-\").map(Number);\n  if (!year || !month || !day) return null;\n  const date = new Date(year, month - 1, day);\n  return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n  const date = fromIso(value);\n  if (!date) return \"\";\n  return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n  return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n  const first = new Date(month.getFullYear(), month.getMonth(), 1);\n  const weekday = (first.getDay() + 6) % 7; // Monday-first\n  return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Selected day, or the start of a selected span. */\n  value?: IsoDate;\n  /** End of a selected span. Set it to put the calendar in range mode. */\n  endValue?: IsoDate;\n  onSelect?: (value: IsoDate) => void;\n  min?: IsoDate;\n  max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n  { value, endValue, onSelect, min, max, className, ...rest },\n  ref,\n) {\n  const selected = fromIso(value);\n  const [month, setMonth] = useState(() => selected ?? new Date());\n  const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const shouldFocus = useRef(false);\n\n  useEffect(() => {\n    const next = fromIso(value);\n    if (!next) return;\n    // Controlled changes intentionally reposition the visible and roving-focus month.\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setFocused(value!);\n    setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n  }, [value]);\n\n  useEffect(() => {\n    if (!shouldFocus.current) return;\n    shouldFocus.current = false;\n    gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n  }, [focused]);\n\n  const days = Array.from({ length: 42 }, (_, index) => {\n    const start = startOfGrid(month);\n    return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n  });\n\n  const today = toIso(new Date());\n\n  const changeMonth = (delta: number) => {\n    const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n    setMonth(next);\n    setFocused(toIso(next));\n  };\n\n  const move = (deltaDays: number) => {\n    const base = fromIso(focused) ?? new Date();\n    const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n    shouldFocus.current = true;\n    setFocused(toIso(next));\n    setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const steps: Record<string, number> = {\n      ArrowLeft: -1,\n      ArrowRight: 1,\n      ArrowUp: -7,\n      ArrowDown: 7,\n      PageUp: -28,\n      PageDown: 28,\n    };\n    const delta = steps[event.key];\n    if (delta === undefined) return;\n    event.preventDefault();\n    move(delta);\n  };\n\n  return (\n    <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n      <div className=\"ds-calendar__head\">\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"chevron-left\"\n          aria-label=\"Previous month\"\n          onClick={() => changeMonth(-1)}\n        />\n        <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"chevron-right\"\n          aria-label=\"Next month\"\n          onClick={() => changeMonth(1)}\n        />\n      </div>\n      <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n        {WEEKDAYS.map((day) => (\n          <span key={day}>{day.slice(0, 2)}</span>\n        ))}\n      </div>\n      <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n        {Array.from({ length: 6 }, (_, rowIndex) => (\n          <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n            {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n              const iso = toIso(day);\n              const isOutside = day.getMonth() !== month.getMonth();\n              const isDisabled = (min && iso < min) || (max && iso > max);\n              const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n              const isEdge = iso === value || iso === endValue;\n              return (\n                <button\n                  key={iso}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  aria-label={formatIsoDate(iso)}\n                  tabIndex={iso === focused ? 0 : -1}\n                  disabled={isDisabled || undefined}\n                  aria-selected={isEdge || undefined}\n                  data-outside={isOutside || undefined}\n                  data-today={iso === today || undefined}\n                  data-in-range={inRange || undefined}\n                  data-focused={iso === focused || undefined}\n                  className=\"ds-calendar__day\"\n                  onClick={() => {\n                    setFocused(iso);\n                    onSelect?.(iso);\n                  }}\n                >\n                  {day.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n\nexport interface DateFieldProps {\n  value?: IsoDate;\n  defaultValue?: IsoDate;\n  onValueChange?: (value: IsoDate) => void;\n  size?: FieldSize;\n  placeholder?: string;\n  min?: IsoDate;\n  max?: IsoDate;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  size = \"md\",\n  placeholder = \"Pick a date\",\n  min,\n  max,\n  isDisabled = false,\n  isInvalid = false,\n  \"aria-invalid\": ariaInvalid,\n  id,\n  className,\n  ...rest\n}: DateFieldProps) {\n  const [internal, setInternal] = useState<IsoDate>(defaultValue);\n  const current = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const triggerId = id ?? generatedId;\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen]);\n\n  return (\n    <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n      <button\n        {...rest}\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-invalid={isInvalid || ariaInvalid || undefined}\n        disabled={isDisabled}\n        data-size={size}\n        data-placeholder={current ? undefined : \"\"}\n        className=\"ds-field-skin ds-datefield__control\"\n        onClick={() => setOpen((open) => !open)}\n      >\n        <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n        <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n      </button>\n      <Popover\n        anchorRef={triggerRef}\n        anchorId={triggerId}\n        isOpen={isOpen}\n        panelRef={panelRef}\n        className=\"ds-datefield__popover\"\n        role=\"dialog\"\n        aria-label=\"Choose a date\"\n      >\n          <Calendar\n            value={current}\n            min={min}\n            max={max}\n            onSelect={(next) => {\n              if (value === undefined) setInternal(next);\n              onValueChange?.(next);\n              setOpen(false);\n              triggerRef.current?.focus();\n            }}\n          />\n      </Popover>\n    </div>\n  );\n}\n\nexport interface DateRangeValue {\n  start: IsoDate;\n  end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n  value?: DateRangeValue;\n  defaultValue?: DateRangeValue;\n  onValueChange?: (value: DateRangeValue) => void;\n  size?: FieldSize;\n  min?: IsoDate;\n  max?: IsoDate;\n  isDisabled?: boolean;\n  startLabel?: string;\n  endLabel?: string;\n  className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n  value,\n  defaultValue = { start: \"\", end: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  isDisabled = false,\n  startLabel = \"Start date\",\n  endLabel = \"End date\",\n  className,\n}: DateRangeFieldProps) {\n  const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: DateRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  return (\n    <div className={cx(\"ds-daterange\", className)}>\n      <DateField\n        aria-label={startLabel}\n        size={size}\n        value={current.start}\n        min={min}\n        max={current.end || max}\n        isDisabled={isDisabled}\n        placeholder={startLabel}\n        onValueChange={(next) => commit({ ...current, start: next })}\n      />\n      <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <DateField\n        aria-label={endLabel}\n        size={size}\n        value={current.end}\n        min={current.start || min}\n        max={max}\n        isDisabled={isDisabled}\n        placeholder={endLabel}\n        onValueChange={(next) => commit({ ...current, end: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,SAASC,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAKA,IAAMC,IAAW;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAEjE,SAASC,EAAM,GAAqB;CAClC,IAAMC,IAAQ,GAAGC,EAAK,SAAS,IAAI,IAAI,SAAS,GAAG,GAAG,GAChDC,IAAM,GAAGD,EAAK,QAAQ,IAAI,SAAS,GAAG,GAAG;CAC/C,OAAO,GAAGA,EAAK,YAAY,EAAE,GAAGD,EAAM,GAAGE;AAC3C;AAEA,SAASC,EAAQ,GAAwC;CACvD,IAAI,CAACC,KAAS,CAAC,sBAAsB,KAAKA,CAAK,GAAG,OAAO;CACzD,IAAM,CAACC,GAAML,GAAOE,KAAOE,EAAM,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;CACtD,IAAI,CAACC,KAAQ,CAACL,KAAS,CAACE,GAAK,OAAO;CACpC,IAAMD,IAAO,IAAI,KAAKI,GAAML,IAAQ,GAAGE,CAAG;CAC1C,OAAO,OAAO,MAAMD,EAAK,QAAQ,CAAC,KAAKF,EAAME,CAAI,MAAMG,IAAQ,OAAOH;AACxE;AAGA,SAAgBK,EAAc,GAAmC;CAC/D,IAAML,IAAOE,EAAQC,CAAK;CAE1B,OADKH,IACEA,EAAK,mBAAmB,SAAS;EAAE,KAAK;EAAW,OAAO;EAAQ,MAAM;CAAU,CAAC,IADxE;AAEpB;AAEA,SAASM,EAAW,GAAY;CAC9B,OAAON,EAAK,mBAAmB,SAAS;EAAE,OAAO;EAAQ,MAAM;CAAU,CAAC;AAC5E;AAEA,SAASO,EAAY,GAAa;CAChC,IAAMC,IAAQ,IAAI,KAAKT,EAAM,YAAY,GAAGA,EAAM,SAAS,GAAG,CAAC,GACzDU,KAAWD,EAAM,OAAO,IAAI,KAAK;CACvC,OAAO,IAAI,KAAKA,EAAM,YAAY,GAAGA,EAAM,SAAS,GAAG,IAAIC,CAAO;AACpE;AAgBA,IAAaC,IAAWC,EAA0C,SAChE,EAAE,UAAO,aAAU,aAAU,QAAK,QAAK,cAAW,GAAGC,KACrD,GACA;CACA,IAAMC,IAAWX,EAAQC,CAAK,GACxB,CAACJ,GAAOe,KAAYC,QAAeF,qBAAY,IAAI,KAAK,CAAC,GACzD,CAACG,GAASC,KAAcF,QAAwBZ,KAASL,kBAAM,IAAI,KAAK,CAAC,CAAC,GAC1EoB,IAAUC,EAA8B,IAAI,GAC5CC,IAAcD,EAAO,EAAK;CAWhC,AATAE,QAAgB;EACd,IAAMC,IAAOpB,EAAQC,CAAK;EAC1B,AAAKmB,MAGLL,EAAWd,CAAM,GACjBW,EAAS,IAAI,KAAKQ,EAAK,YAAY,GAAGA,EAAK,SAAS,GAAG,CAAC,CAAC;CAC3D,GAAG,CAACnB,CAAK,CAAC,GAEVkB,QAAgB;EACd,AAAKD,EAAY,YACjB,EAAY,UAAU,IACtBF,EAAQ,SAAS,cAAiC,gBAAgB,CAAC,EAAE,MAAM;CAC7E,GAAG,CAACF,CAAO,CAAC;CAEZ,IAAMO,IAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAU;EACpD,IAAMC,IAAQjB,EAAYR,CAAK;EAC/B,OAAO,IAAI,KAAKyB,EAAM,YAAY,GAAGA,EAAM,SAAS,GAAGA,EAAM,QAAQ,IAAIC,CAAK;CAChF,CAAC,GAEKC,IAAQ5B,kBAAM,IAAI,KAAK,CAAC,GAExB6B,KAAe,MAAkB;EACrC,IAAML,IAAO,IAAI,KAAKvB,EAAM,YAAY,GAAGA,EAAM,SAAS,IAAI6B,GAAO,CAAC;EAEtE,AADAd,EAASQ,CAAI,GACbL,EAAWnB,EAAMwB,CAAI,CAAC;CACxB,GAEMO,KAAQ,MAAsB;EAClC,IAAMC,IAAO5B,EAAQc,CAAO,qBAAK,IAAI,KAAK,GACpCM,IAAO,IAAI,KAAKQ,EAAK,YAAY,GAAGA,EAAK,SAAS,GAAGA,EAAK,QAAQ,IAAIC,CAAS;EAGrF,AAFA,EAAY,UAAU,IACtBd,EAAWnB,EAAMwB,CAAI,CAAC,GACtBR,EAAS,IAAI,KAAKQ,EAAK,YAAY,GAAGA,EAAK,SAAS,GAAG,CAAC,CAAC;CAC3D,GAEMU,KAAa,MAA+B;EAShD,IAAMJ,IAAQ;GAPZ,WAAW;GACX,YAAY;GACZ,SAAS;GACT,WAAW;GACX,QAAQ;GACR,UAAU;EAEE,EAAMK,EAAM;EAC1B,AAAIL,MAAU,KAAA,MACdK,EAAM,eAAe,GACrBJ,EAAKD,CAAK;CACZ;CAEA,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWjC,EAAG,eAAeuC,CAAS;EAAG,GAAItB;EAA5D,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAACuB,GAAD;MACE,SAAQ;MACR,MAAK;MACL,YAAA;MACA,WAAU;MACV,cAAW;MACX,eAAeR,EAAY,EAAE;KAC9B,CAAA;KACD,kBAAC,QAAD;MAAM,WAAU;MAAsB,UAAArB,EAAWP,CAAK;KAAQ,CAAA;KAC9D,kBAACoC,GAAD;MACE,SAAQ;MACR,MAAK;MACL,YAAA;MACA,WAAU;MACV,cAAW;MACX,eAAeR,EAAY,CAAC;KAC7B,CAAA;IACE;;GACL,kBAAC,OAAD;IAAK,WAAU;IAAwB,eAAY;IAChD,UAAA9B,EAAS,KAAK,MACb,kBAAC,QAAD,EAAA,UAAiBI,EAAI,MAAM,GAAG,CAAC,EAAQ,GAA5BA,CAA4B,CACxC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,KAAKiB;IAAS,WAAU;IAAoB,MAAK;IAAkB;IACrE,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MAC7B,kBAAC,OAAD;KAAK,MAAK;KAAM,WAAU;KACvB,UAAAK,EAAK,MAAMa,IAAW,GAAGA,IAAW,IAAI,CAAC,CAAC,CAAC,KAAK,MAAQ;MACvD,IAAMC,IAAMvC,EAAMG,CAAG,GACfqC,IAAYrC,EAAI,SAAS,MAAMF,EAAM,SAAS,GAC9CwC,IAAcC,KAAOH,IAAMG,KAASC,KAAOJ,IAAMI,GACjDC,IAAU,GAAQvC,KAASwC,KAAYN,IAAMlC,KAASkC,IAAMM,IAC5DC,IAASP,MAAQlC,KAASkC,MAAQM;MACxC,OACE,kBAAC,UAAD;OAEE,MAAK;OACL,MAAK;OACL,cAAYtC,EAAcgC,CAAG;OAC7B,UAAUA,MAAQrB,IAAU,IAAI;OAChC,UAAUuB,KAAc,KAAA;OACxB,iBAAeK,KAAU,KAAA;OACzB,gBAAcN,KAAa,KAAA;OAC3B,cAAYD,MAAQX,KAAS,KAAA;OAC7B,iBAAegB,KAAW,KAAA;OAC1B,gBAAcL,MAAQrB,KAAW,KAAA;OACjC,WAAU;OACV,eAAe;QAEb,AADAC,EAAWoB,CAAG,GACdQ,IAAWR,CAAG;OAChB;OAEC,UAAApC,EAAI,QAAQ;MACP,GAlBDoC,CAkBC;KAEZ,CAAC;IACE,GA9B6CD,CA8B7C,CACN;GACE,CAAA;EACF;;AAET,CAAC;AAoBD,SAAgBU,EAAU,EACxB,UACA,kBAAe,IACf,kBACA,UAAO,MACP,iBAAc,eACd,QACA,QACA,gBAAa,IACb,eAAY,IACZ,gBAAgBC,GAChB,OACA,cACA,GAAGnC,KACc;CACjB,IAAM,CAACoC,GAAUC,KAAelC,EAAkBmC,CAAY,GACxDC,IAAUhD,KAAS6C,GACnB,CAACI,GAAQC,KAAWtC,EAAS,EAAK,GAClCuC,IAAUnC,EAA8B,IAAI,GAC5CoC,IAAapC,EAAiC,IAAI,GAClDqC,IAAWrC,EAA8B,IAAI,GAC7CsC,IAAcC,EAAM,GACpBC,IAAYC,KAAMH;CAsBxB,OApBApC,QAAgB;EACd,IAAI,CAAC+B,GAAQ;EACb,IAAMS,KAAiB,MAAsB;GAC3C,IAAMC,IAAS7B,EAAM;GACrB,AAAI,CAACqB,EAAQ,SAAS,SAASQ,CAAM,KAAK,CAACN,EAAS,SAAS,SAASM,CAAM,KAAGT,EAAQ,EAAK;EAC9F,GACMrB,KAAa,MAAyB;GAC1C,AAAIC,EAAM,QAAQ,aAChBoB,EAAQ,EAAK,GACbE,EAAW,SAAS,MAAM;EAE9B;EAGA,OAFA,SAAS,iBAAiB,aAAaM,CAAa,GACpD,SAAS,iBAAiB,WAAW7B,CAAS,SACjC;GAEX,AADA,SAAS,oBAAoB,aAAa6B,CAAa,GACvD,SAAS,oBAAoB,WAAW7B,CAAS;EACnD;CACF,GAAG,CAACoB,CAAM,CAAC,GAGT,kBAAC,OAAD;EAAK,WAAWzD,EAAG,gBAAgBuC,CAAS;EAAG,KAAKoB;EAApD,UAAA,CACE,kBAAC,UAAD;GACE,GAAI1C;GACJ,KAAK2C;GACL,IAAII;GACJ,MAAK;GACL,iBAAc;GACd,iBAAeP;GACf,gBAAcW,KAAahB,KAAe,KAAA;GAC1C,UAAUR;GACV,aAAWyB;GACX,oBAAkBb,IAAU,KAAA,IAAY;GACxC,WAAU;GACV,eAAeE,GAAS,MAAS,CAACY,CAAI;GAZxC,UAAA,CAcE,kBAAC,QAAD;IAAM,WAAU;IAAuB,UAAAd,IAAU9C,EAAc8C,CAAO,IAAIe;GAAkB,CAAA,GAC5F,kBAACxE,GAAD;IAAM,MAAK;IAAW,MAAM;IAAI,WAAU;GAAuB,CAAA,CAC3D;EACR,CAAA,GAAA,kBAACyE,GAAD;GACE,WAAWZ;GACX,UAAUI;GACF;GACE;GACV,WAAU;GACV,MAAK;GACL,cAAW;GAET,UAAA,kBAACjD,GAAD;IACE,OAAOyC;IACF;IACA;IACL,WAAW,MAAS;KAIlB,AAHIhD,MAAU,KAAA,KAAW8C,EAAY3B,CAAI,GACzC8C,IAAgB9C,CAAI,GACpB+B,EAAQ,EAAK,GACbE,EAAW,SAAS,MAAM;IAC5B;GACD,CAAA;EACI,CAAA,CACN;;AAET;AAqBA,SAAgBc,EAAe,EAC7B,UACA,kBAAe;CAAE,OAAO;CAAI,KAAK;AAAG,GACpC,kBACA,UAAO,MACP,QACA,QACA,gBAAa,IACb,gBAAa,cACb,cAAW,YACX,gBACsB;CACtB,IAAM,CAACrB,GAAUC,KAAelC,EAAyBmC,CAAY,GAC/DC,IAAUhD,KAAS6C,GAEnBsB,KAAU,MAAyB;EAEvC,AADInE,MAAU,KAAA,KAAW8C,EAAY3B,CAAI,GACzC8C,IAAgB9C,CAAI;CACtB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW3B,EAAG,gBAAgBuC,CAAS;EAA5C,UAAA;GACE,kBAACY,GAAD;IACE,cAAYyB;IACN;IACN,OAAOpB,EAAQ;IACV;IACL,KAAKA,EAAQ,OAAOV;IACR;IACZ,aAAa8B;IACb,gBAAgB,MAASD,EAAO;KAAE,GAAGnB;KAAS,OAAO7B;IAAK,CAAC;GAC5D,CAAA;GACD,kBAAC,QAAD;IAAM,WAAU;IAAqB,eAAY;IAAO,UAAA;GAElD,CAAA;GACN,kBAACwB,GAAD;IACE,cAAY0B;IACN;IACN,OAAOrB,EAAQ;IACf,KAAKA,EAAQ,SAASX;IACjB;IACO;IACZ,aAAagC;IACb,gBAAgB,MAASF,EAAO;KAAE,GAAGnB;KAAS,KAAK7B;IAAK,CAAC;GAC1D,CAAA;EACE;;AAET"}

package/dist/components/DatePicker/style.css

@@ -0,0 +1,149 @@
+@layer components {
+  .ds-calendar {
+    --field-bg: var(--color-surface-raised);
+
+    inline-size: max-content;
+    padding: var(--space-3);
+    background: var(--color-surface-raised);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+  }
+
+  .ds-calendar__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding-block-end: var(--space-2);
+    margin-block-end: var(--space-2);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-calendar__month {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ds-calendar__weekdays,
+  .ds-calendar__grid {
+    display: grid;
+    grid-template-columns: repeat(7, var(--calendar-cell-size));
+    gap: 2px;
+  }
+
+  .ds-calendar__weekdays span {
+    display: grid;
+    place-items: center;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: var(--table-head-tracking);
+    text-transform: uppercase;
+  }
+
+  .ds-calendar__row {
+    display: contents;
+  }
+
+  .ds-calendar__day {
+    display: grid;
+    place-items: center;
+    inline-size: var(--calendar-cell-size);
+    block-size: var(--calendar-cell-size);
+    border: var(--control-border-width) solid transparent;
+    border-radius: var(--field-radius);
+    background: transparent;
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-calendar__day:hover:not(:disabled) {
+    background: var(--field-hover);
+  }
+
+  .ds-calendar__day:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-calendar__day[data-outside] {
+    color: var(--color-text-muted);
+  }
+
+  .ds-calendar__day[data-today] {
+    border-color: var(--control-border-color);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ds-calendar__day[data-in-range] {
+    background: var(--color-primary-soft);
+  }
+
+  .ds-calendar__day[aria-selected="true"] {
+    background: var(--color-primary);
+    color: var(--color-text-on-solid);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ds-calendar__day:disabled {
+    opacity: 40%;
+    cursor: not-allowed;
+  }
+
+  .ds-datefield {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .ds-datefield__control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 0 10px;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .ds-datefield__control[data-size="sm"] {
+    block-size: var(--field-height-sm);
+    font-size: var(--field-font-size-sm);
+  }
+
+  .ds-datefield__control[data-size="md"] {
+    block-size: var(--field-height-md);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-datefield__control[data-size="lg"] {
+    block-size: var(--field-height-lg);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-datefield__control[data-placeholder] .ds-datefield__value {
+    color: var(--color-text-muted);
+  }
+
+  .ds-datefield__glyph {
+    flex: none;
+    color: var(--color-text-muted);
+  }
+
+  .ds-datefield__popover {
+    box-shadow: var(--shadow-lg);
+    border-radius: var(--radius-md);
+  }
+
+  .ds-daterange {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .ds-daterange__dash {
+    color: var(--color-text-muted);
+  }
+}

package/dist/components/Drawer/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("react-dom");var i=(0,t.forwardRef)(function({isOpen:i,onClose:a,title:o,description:s,side:c=`end`,size:l=`md`,footer:u,className:d,children:f,...p},m){let h=(0,t.useRef)(null),g=(0,t.useRef)(a),_=(0,t.useId)(),v=(0,t.useId)();return(0,t.useEffect)(()=>{g.current=a},[a]),(0,t.useEffect)(()=>{if(!i)return;let e=document.activeElement;(h.current?.querySelector(`button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])`)??h.current)?.focus();let t=e=>{if(e.key===`Escape`){g.current();return}if(e.key!==`Tab`)return;let t=Array.from(h.current?.querySelectorAll(`button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])`)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey&&document.activeElement===n?(e.preventDefault(),r.focus()):!e.shiftKey&&document.activeElement===r&&(e.preventDefault(),n.focus())};document.addEventListener(`keydown`,t);let n=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.removeEventListener(`keydown`,t),document.body.style.overflow=n,e?.focus()}},[i]),!i||typeof document>`u`?null:(0,r.createPortal)((0,n.jsx)(`div`,{className:`ds-drawer-scrim`,"data-side":c,onMouseDown:e=>e.target===e.currentTarget&&g.current(),children:(0,n.jsxs)(`div`,{...p,ref:e=>{h.current=e,typeof m==`function`?m(e):m&&(m.current=e)},role:`dialog`,"aria-modal":`true`,"aria-labelledby":_,"aria-describedby":s?v:void 0,tabIndex:-1,"data-side":c,"data-size":l,className:[`ds-drawer`,d].filter(Boolean).join(` `),children:[(0,n.jsxs)(`header`,{className:`ds-drawer__head`,children:[(0,n.jsxs)(`div`,{className:`ds-drawer__titles`,children:[(0,n.jsx)(`h2`,{id:_,className:`ds-drawer__title`,children:o}),s&&(0,n.jsx)(`p`,{id:v,className:`ds-drawer__description`,children:s})]}),(0,n.jsx)(e.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`x`,"aria-label":`Close`,onClick:()=>g.current()})]}),(0,n.jsx)(`div`,{className:`ds-drawer__body`,children:f}),u&&(0,n.jsx)(`footer`,{className:`ds-drawer__footer`,children:u})]})}),document.body)});exports.Drawer=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Drawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useId","createPortal","Button","require_components_Button_index","react","react_jsx_runtime","react_dom","Drawer","rest","panelRef","onCloseRef","onClose","titleId","descriptionId","isOpen","previous","onKeyDown","event","focusable","first","last","overflow","side","node","ref","description","size","className","title","footer"],"sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nexport type DrawerSide = \"end\" | \"start\" | \"bottom\";\nexport type DrawerSize = \"md\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  isOpen: boolean;\n  /** Escape, the scrim and the close button all call this. */\n  onClose: () => void;\n  title: string;\n  description?: string;\n  /** Which edge the panel is anchored to. */\n  side?: DrawerSide;\n  size?: DrawerSize;\n  /** Actions, right-aligned. The confirming action goes last. */\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A side panel for work that belongs beside the page rather than on top of it\n * — editing one record, a filter set, a revision history. Same frame, rules\n * and footer band as `Modal`; focus is trapped while open.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  {\n    isOpen,\n    onClose,\n    title,\n    description,\n    side = \"end\",\n    size = \"md\",\n    footer,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const onCloseRef = useRef(onClose);\n  const titleId = useId();\n  const descriptionId = useId();\n\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const previous = document.activeElement as HTMLElement | null;\n    const initialFocus = panelRef.current?.querySelector<HTMLElement>(\n      \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n    );\n    (initialFocus ?? panelRef.current)?.focus();\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onCloseRef.current();\n        return;\n      }\n      if (event.key !== \"Tab\") return;\n      const focusable = Array.from(\n        panelRef.current?.querySelectorAll<HTMLElement>(\n          \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n        ) ?? [],\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0]!;\n      const last = focusable[focusable.length - 1]!;\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    const overflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.body.style.overflow = overflow;\n      previous?.focus();\n    };\n  }, [isOpen]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      className=\"ds-drawer-scrim\"\n      data-side={side}\n      onMouseDown={(event) => event.target === event.currentTarget && onCloseRef.current()}\n    >\n      <div\n        {...rest}\n        ref={(node) => {\n          panelRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        data-side={side}\n        data-size={size}\n        className={[\"ds-drawer\", className].filter(Boolean).join(\" \")}\n      >\n        <header className=\"ds-drawer__head\">\n          <div className=\"ds-drawer__titles\">\n            <h2 id={titleId} className=\"ds-drawer__title\">\n              {title}\n            </h2>\n            {description && (\n              <p id={descriptionId} className=\"ds-drawer__description\">\n                {description}\n              </p>\n            )}\n          </div>\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label=\"Close\"\n            onClick={() => onCloseRef.current()}\n          />\n        </header>\n        <div className=\"ds-drawer__body\">{children}</div>\n        {footer && <footer className=\"ds-drawer__footer\">{footer}</footer>}\n      </div>\n    </div>,\n    document.body,\n  );\n});\n"],"mappings":"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"}

package/dist/components/Drawer/index.d.cts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type DrawerSide = "end" | "start" | "bottom";
+export type DrawerSize = "md" | "wide";
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    isOpen: boolean;
+    /** Escape, the scrim and the close button all call this. */
+    onClose: () => void;
+    title: string;
+    description?: string;
+    /** Which edge the panel is anchored to. */
+    side?: DrawerSide;
+    size?: DrawerSize;
+    /** Actions, right-aligned. The confirming action goes last. */
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A side panel for work that belongs beside the page rather than on top of it
+ * — editing one record, a filter set, a revision history. Same frame, rules
+ * and footer band as `Modal`; focus is trapped while open.
+ */
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Drawer/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChF,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,wGAqHjB,CAAC"}

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type DrawerSide = "end" | "start" | "bottom";
+export type DrawerSize = "md" | "wide";
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    isOpen: boolean;
+    /** Escape, the scrim and the close button all call this. */
+    onClose: () => void;
+    title: string;
+    description?: string;
+    /** Which edge the panel is anchored to. */
+    side?: DrawerSide;
+    size?: DrawerSize;
+    /** Actions, right-aligned. The confirming action goes last. */
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A side panel for work that belongs beside the page rather than on top of it
+ * — editing one record, a filter set, a revision history. Same frame, rules
+ * and footer band as `Modal`; focus is trapped while open.
+ */
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChF,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,wGAqHjB,CAAC"}

package/dist/components/Drawer/index.js

@@ -0,0 +1,85 @@
+import { Button as e } from "../Button/index.js";
+import { forwardRef as t, useEffect as n, useId as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/components/Drawer/index.tsx
+var c = t(function({ isOpen: t, onClose: c, title: l, description: u, side: d = "end", size: f = "md", footer: p, className: m, children: h, ...g }, _) {
+	let v = i(null), y = i(c), b = r(), x = r();
+	return n(() => {
+		y.current = c;
+	}, [c]), n(() => {
+		if (!t) return;
+		let e = document.activeElement;
+		(v.current?.querySelector("button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])") ?? v.current)?.focus();
+		let n = (e) => {
+			if (e.key === "Escape") {
+				y.current();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = Array.from(v.current?.querySelectorAll("button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])") ?? []);
+			if (t.length === 0) return;
+			let n = t[0], r = t[t.length - 1];
+			e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
+		};
+		document.addEventListener("keydown", n);
+		let r = document.body.style.overflow;
+		return document.body.style.overflow = "hidden", () => {
+			document.removeEventListener("keydown", n), document.body.style.overflow = r, e?.focus();
+		};
+	}, [t]), !t || typeof document > "u" ? null : s(/* @__PURE__ */ a("div", {
+		className: "ds-drawer-scrim",
+		"data-side": d,
+		onMouseDown: (e) => e.target === e.currentTarget && y.current(),
+		children: /* @__PURE__ */ o("div", {
+			...g,
+			ref: (e) => {
+				v.current = e, typeof _ == "function" ? _(e) : _ && (_.current = e);
+			},
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": b,
+			"aria-describedby": u ? x : void 0,
+			tabIndex: -1,
+			"data-side": d,
+			"data-size": f,
+			className: ["ds-drawer", m].filter(Boolean).join(" "),
+			children: [
+				/* @__PURE__ */ o("header", {
+					className: "ds-drawer__head",
+					children: [/* @__PURE__ */ o("div", {
+						className: "ds-drawer__titles",
+						children: [/* @__PURE__ */ a("h2", {
+							id: b,
+							className: "ds-drawer__title",
+							children: l
+						}), u && /* @__PURE__ */ a("p", {
+							id: x,
+							className: "ds-drawer__description",
+							children: u
+						})]
+					}), /* @__PURE__ */ a(e, {
+						variant: "simple",
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: "x",
+						"aria-label": "Close",
+						onClick: () => y.current()
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "ds-drawer__body",
+					children: h
+				}),
+				p && /* @__PURE__ */ a("footer", {
+					className: "ds-drawer__footer",
+					children: p
+				})
+			]
+		})
+	}), document.body);
+});
+//#endregion
+export { c as Drawer };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Drawer","forwardRef","rest","panelRef","useRef","onCloseRef","onClose","titleId","useId","descriptionId","useEffect","isOpen","previous","onKeyDown","event","focusable","first","last","overflow","createPortal","side","node","ref","description","size","className","title","Button","footer"],"sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nexport type DrawerSide = \"end\" | \"start\" | \"bottom\";\nexport type DrawerSize = \"md\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  isOpen: boolean;\n  /** Escape, the scrim and the close button all call this. */\n  onClose: () => void;\n  title: string;\n  description?: string;\n  /** Which edge the panel is anchored to. */\n  side?: DrawerSide;\n  size?: DrawerSize;\n  /** Actions, right-aligned. The confirming action goes last. */\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A side panel for work that belongs beside the page rather than on top of it\n * — editing one record, a filter set, a revision history. Same frame, rules\n * and footer band as `Modal`; focus is trapped while open.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  {\n    isOpen,\n    onClose,\n    title,\n    description,\n    side = \"end\",\n    size = \"md\",\n    footer,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const onCloseRef = useRef(onClose);\n  const titleId = useId();\n  const descriptionId = useId();\n\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const previous = document.activeElement as HTMLElement | null;\n    const initialFocus = panelRef.current?.querySelector<HTMLElement>(\n      \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n    );\n    (initialFocus ?? panelRef.current)?.focus();\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onCloseRef.current();\n        return;\n      }\n      if (event.key !== \"Tab\") return;\n      const focusable = Array.from(\n        panelRef.current?.querySelectorAll<HTMLElement>(\n          \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n        ) ?? [],\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0]!;\n      const last = focusable[focusable.length - 1]!;\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    const overflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.body.style.overflow = overflow;\n      previous?.focus();\n    };\n  }, [isOpen]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      className=\"ds-drawer-scrim\"\n      data-side={side}\n      onMouseDown={(event) => event.target === event.currentTarget && onCloseRef.current()}\n    >\n      <div\n        {...rest}\n        ref={(node) => {\n          panelRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        data-side={side}\n        data-size={size}\n        className={[\"ds-drawer\", className].filter(Boolean).join(\" \")}\n      >\n        <header className=\"ds-drawer__head\">\n          <div className=\"ds-drawer__titles\">\n            <h2 id={titleId} className=\"ds-drawer__title\">\n              {title}\n            </h2>\n            {description && (\n              <p id={descriptionId} className=\"ds-drawer__description\">\n                {description}\n              </p>\n            )}\n          </div>\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label=\"Close\"\n            onClick={() => onCloseRef.current()}\n          />\n        </header>\n        <div className=\"ds-drawer__body\">{children}</div>\n        {footer && <footer className=\"ds-drawer__footer\">{footer}</footer>}\n      </div>\n    </div>,\n    document.body,\n  );\n});\n"],"mappings":";;;;;AA2BA,IAAaA,IAASC,EAAwC,SAC5D,EACE,WACA,YACA,UACA,gBACA,UAAO,OACP,UAAO,MACP,WACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAWC,EAA8B,IAAI,GAC7CC,IAAaD,EAAOE,CAAO,GAC3BC,IAAUC,EAAM,GAChBC,IAAgBD,EAAM;CAmD5B,OAjDAE,QAAgB;EACd,EAAW,UAAUJ;CACvB,GAAG,CAACA,CAAO,CAAC,GAEZI,QAAgB;EACd,IAAI,CAACC,GAAQ;EAEb,IAAMC,IAAW,SAAS;EAI1B,CAHqBT,EAAS,SAAS,cACrC,sIACF,KACiBA,EAAS,QAAA,EAAU,MAAM;EAE1C,IAAMU,KAAa,MAAyB;GAC1C,IAAIC,EAAM,QAAQ,UAAU;IAC1B,EAAW,QAAQ;IACnB;GACF;GACA,IAAIA,EAAM,QAAQ,OAAO;GACzB,IAAMC,IAAY,MAAM,KACtBZ,EAAS,SAAS,iBAChB,sIACF,KAAK,CAAC,CACR;GACA,IAAIY,EAAU,WAAW,GAAG;GAC5B,IAAMC,IAAQD,EAAU,IAClBE,IAAOF,EAAUA,EAAU,SAAS;GAC1C,AAAID,EAAM,YAAY,SAAS,kBAAkBE,KAC/CF,EAAM,eAAe,GACrBG,EAAK,MAAM,KACF,CAACH,EAAM,YAAY,SAAS,kBAAkBG,MACvDH,EAAM,eAAe,GACrBE,EAAM,MAAM;EAEhB;EAEA,SAAS,iBAAiB,WAAWH,CAAS;EAC9C,IAAMK,IAAW,SAAS,KAAK,MAAM;EAGrC,OAFA,SAAS,KAAK,MAAM,WAAW,gBAElB;GAGX,AAFA,SAAS,oBAAoB,WAAWL,CAAS,GACjD,SAAS,KAAK,MAAM,WAAWK,GAC/BN,GAAU,MAAM;EAClB;CACF,GAAG,CAACD,CAAM,CAAC,GAEP,CAACA,KAAU,OAAO,WAAa,MAAoB,OAEhDQ,EACL,kBAAC,OAAD;EACE,WAAU;EACV,aAAWC;EACX,cAAc,MAAUN,EAAM,WAAWA,EAAM,iBAAiBT,EAAW,QAAQ;EAEnF,UAAA,kBAAC,OAAD;GACE,GAAIH;GACJ,MAAM,MAAS;IAEb,AADA,EAAS,UAAUmB,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACL,cAAW;GACX,mBAAiBd;GACjB,oBAAkBgB,IAAcd,IAAgB,KAAA;GAChD,UAAU;GACV,aAAWW;GACX,aAAWI;GACX,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAd9D,UAAA;IAgBE,kBAAC,UAAD;KAAQ,WAAU;KAAlB,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,MAAD;OAAI,IAAIlB;OAAS,WAAU;OACxB,UAAAmB;MACC,CAAA,GACHH,KACC,kBAAC,KAAD;OAAG,IAAId;OAAe,WAAU;OAC7B,UAAAc;MACA,CAAA,CAEF;KACL,CAAA,GAAA,kBAACI,GAAD;MACE,SAAQ;MACR,MAAK;MACL,YAAA;MACA,WAAU;MACV,cAAW;MACX,eAAetB,EAAW,QAAQ;KACnC,CAAA,CACK;;IACR,kBAAC,OAAD;KAAK,WAAU;KAAmB;IAAc,CAAA;IAC/CuB,KAAU,kBAAC,UAAD;KAAQ,WAAU;KAAqB,UAAAA;IAAe,CAAA;GAC9D;;CACF,CAAA,GACL,SAAS,IACX;AACF,CAAC"}