@blurrow/ui 0.1.0 → 0.2.1

package/dist/DateRangePicker.js

@@ -0,0 +1,180 @@
+"use client";
+
+// ../../components/ui/DateRangePicker.tsx
+import { useId, useRef, useState } from "react";
+import { Calendar, CalendarIcon, ClearKey, sameDay, startOfDay, toISODate } from "./DatePicker.js";
+import { Portal } from "./Floating.js";
+import { FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { useFloatingPanel } from "./useFloatingPanel.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var EMPTY = { from: null, to: null };
+function DateRangePicker({
+  value,
+  defaultValue = EMPTY,
+  onChange,
+  label,
+  hint,
+  error,
+  placeholder = "pick dates",
+  min,
+  max,
+  isDateDisabled,
+  weekStartsOn,
+  locale = "en-US",
+  presets,
+  singleMonth = false,
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  name,
+  className = ""
+}) {
+  const uid = useId();
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue);
+  const range = value ?? internal;
+  const [draft, setDraft] = useState(null);
+  const [hover, setHover] = useState(null);
+  const { open, mounted, toggle, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    onEscape: () => buttonRef.current?.focus()
+  });
+  const messageId = error || hint ? `${uid}-message` : void 0;
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (!open) {
+      setDraft(null);
+      setHover(null);
+    }
+  }
+  const set = (r) => {
+    setInternal(r);
+    onChange?.(r);
+  };
+  const pickDay = (d) => {
+    if (!draft) {
+      setDraft(d);
+      return;
+    }
+    const [from, to] = d < draft ? [d, draft] : [draft, d];
+    set({ from, to });
+    setDraft(null);
+    close();
+    buttonRef.current?.focus();
+  };
+  const shown = draft ? hover && !sameDay(hover, draft) ? hover < draft ? { from: hover, to: draft } : { from: draft, to: hover } : { from: draft, to: draft } : range;
+  const fmt = new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", year: "numeric" });
+  const text = range.from && range.to ? (
+    // formatRange drops the repeated month and year: "Aug 3 – 12, 2028"
+    fmt.formatRange(range.from, range.to)
+  ) : range.from ? `${fmt.format(range.from)} \u2013` : null;
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, children: label }),
+    /* @__PURE__ */ jsxs("div", { ref, className: ["relative", fullWidth ? "w-full" : "inline-block w-72", className].join(" "), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: buttonRef,
+          type: "button",
+          disabled,
+          onClick: toggle,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-labelledby": label ? `${uid}-label ${uid}-value` : void 0,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": messageId,
+          "data-open": open || void 0,
+          className: [
+            "field group/date relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]",
+            clearable && range.from ? "pr-10" : "pr-4",
+            "focus:outline-none disabled:opacity-40 disabled:pointer-events-none"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx(
+              CalendarIcon,
+              {
+                className: [
+                  "shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]",
+                  open ? "scale-110 text-ink-soft" : "text-ink-faint group-hover/date:text-ink-body"
+                ].join(" ")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { id: `${uid}-value`, className: ["truncate tabular-nums", text ? "font-medium text-ink" : "text-ink-faint"].join(" "), children: text ?? placeholder })
+          ]
+        }
+      ),
+      clearable && range.from && !disabled && /* @__PURE__ */ jsx(
+        ClearKey,
+        {
+          label: "clear dates",
+          onClear: () => {
+            set(EMPTY);
+            buttonRef.current?.focus();
+          }
+        }
+      ),
+      name && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}[from]`, value: range.from ? toISODate(range.from) : "" }),
+        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}[to]`, value: range.to ? toISODate(range.to) : "" })
+      ] })
+    ] }),
+    mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloating,
+        role: "dialog",
+        "aria-label": label ? `choose ${label}` : "choose dates",
+        className: "max-w-[calc(100vw-16px)] rounded-[16px] p-1.5",
+        style: panelStyle,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col gap-3 rounded-[11px] bg-panel-face p-2.5 sm:flex-row",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children: [
+              presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-row flex-wrap gap-1 border-line-strong pb-2 sm:w-32 sm:flex-col sm:border-r sm:pb-0 sm:pr-2", children: presets.map((p) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    const r = p.range();
+                    set({ from: r.from && startOfDay(r.from), to: r.to && startOfDay(r.to) });
+                    close();
+                    buttonRef.current?.focus();
+                  },
+                  className: "cursor-pointer rounded-[8px] px-2.5 py-1.5 text-left text-[12.5px] text-ink-body transition-colors hover:bg-surface-active hover:text-ink focus-visible:outline-2 focus-visible:outline-ink",
+                  children: p.label
+                },
+                p.label
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    range: shown,
+                    onChange: pickDay,
+                    onDayHover: setHover,
+                    months: singleMonth ? 1 : 2,
+                    min,
+                    max,
+                    isDateDisabled,
+                    weekStartsOn,
+                    locale,
+                    autoFocus: true
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "px-1 text-[11.5px] text-ink-faint", children: draft ? "now pick the last day" : "pick the first day" })
+              ] })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: messageId, error, hint })
+  ] });
+}
+export {
+  DateRangePicker
+};
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/DateRangePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useRef, useState } from \"react\";\nimport { Calendar, CalendarIcon, ClearKey, DateRange, sameDay, startOfDay, toISODate } from \"./DatePicker\";\nimport { Portal } from \"./Floating\";\nimport { FieldLabel, FieldMessage } from \"./FieldMessage\";\nimport { useFloatingPanel } from \"./useFloatingPanel\";\n\nexport type { DateRange };\n\nexport interface DateRangePreset {\n  label: string;\n  range: () => DateRange;\n}\n\ninterface DateRangePickerProps {\n  value?: DateRange;\n  defaultValue?: DateRange;\n  onChange?: (range: DateRange) => void;\n  label?: string;\n  hint?: string;\n  error?: string;\n  placeholder?: string;\n  min?: Date;\n  max?: Date;\n  isDateDisabled?: (date: Date) => boolean;\n  weekStartsOn?: 0 | 1;\n  locale?: string;\n  /** Shortcuts down the side, like \"last 7 days\" */\n  presets?: DateRangePreset[];\n  /** One month instead of two side by side */\n  singleMonth?: boolean;\n  clearable?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  /** Submits name[from] and name[to] as yyyy-mm-dd */\n  name?: string;\n  className?: string;\n}\n\nconst EMPTY: DateRange = { from: null, to: null };\n\n/* The first click sets where the range starts, the second where it ends\n   (either way round), and the days between sink into a well as you hover.\n   Two months sit side by side, wrapping to one above the other on a\n   narrow screen.                                                    */\nexport function DateRangePicker({\n  value,\n  defaultValue = EMPTY,\n  onChange,\n  label,\n  hint,\n  error,\n  placeholder = \"pick dates\",\n  min,\n  max,\n  isDateDisabled,\n  weekStartsOn,\n  locale = \"en-US\",\n  presets,\n  singleMonth = false,\n  clearable = false,\n  disabled = false,\n  fullWidth = false,\n  name,\n  className = \"\",\n}: DateRangePickerProps) {\n  const uid = useId();\n  const ref = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [internal, setInternal] = useState<DateRange>(defaultValue);\n  const range = value ?? internal;\n  // Mid-selection: the start is down, the end follows the pointer\n  const [draft, setDraft] = useState<Date | null>(null);\n  const [hover, setHover] = useState<Date | null>(null);\n  const { open, mounted, toggle, close, setFloating, panelStyle } = useFloatingPanel(ref, {\n    onEscape: () => buttonRef.current?.focus(),\n  });\n  const messageId = error || hint ? `${uid}-message` : undefined;\n\n  // Reset a half-made selection whenever the panel closes\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (!open) {\n      setDraft(null);\n      setHover(null);\n    }\n  }\n\n  const set = (r: DateRange) => {\n    setInternal(r);\n    onChange?.(r);\n  };\n\n  const pickDay = (d: Date) => {\n    if (!draft) {\n      setDraft(d);\n      return;\n    }\n    const [from, to] = d < draft ? [d, draft] : [draft, d];\n    set({ from, to });\n    setDraft(null);\n    close();\n    buttonRef.current?.focus();\n  };\n\n  // What the calendar shades: the finished range, or the one being drawn\n  const shown: DateRange = draft\n    ? hover && !sameDay(hover, draft)\n      ? hover < draft\n        ? { from: hover, to: draft }\n        : { from: draft, to: hover }\n      : { from: draft, to: draft }\n    : range;\n\n  const fmt = new Intl.DateTimeFormat(locale, { month: \"short\", day: \"numeric\", year: \"numeric\" });\n  const text =\n    range.from && range.to\n      ? // formatRange drops the repeated month and year: \"Aug 3 – 12, 2028\"\n        fmt.formatRange(range.from, range.to)\n      : range.from\n        ? `${fmt.format(range.from)} –`\n        : null;\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}\n      <div ref={ref} className={[\"relative\", fullWidth ? \"w-full\" : \"inline-block w-72\", className].join(\" \")}>\n        {/* The field's error styling keys off aria-invalid, as Input's does */}\n        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n        <button\n          ref={buttonRef}\n          type=\"button\"\n          disabled={disabled}\n          onClick={toggle}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={messageId}\n          data-open={open || undefined}\n          className={[\n            \"field group/date relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]\",\n            clearable && range.from ? \"pr-10\" : \"pr-4\",\n            \"focus:outline-none disabled:opacity-40 disabled:pointer-events-none\",\n          ].join(\" \")}\n        >\n          <CalendarIcon\n            className={[\n              \"shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]\",\n              open ? \"scale-110 text-ink-soft\" : \"text-ink-faint group-hover/date:text-ink-body\",\n            ].join(\" \")}\n          />\n          <span id={`${uid}-value`} className={[\"truncate tabular-nums\", text ? \"font-medium text-ink\" : \"text-ink-faint\"].join(\" \")}>\n            {text ?? placeholder}\n          </span>\n        </button>\n        {clearable && range.from && !disabled && (\n          <ClearKey\n            label=\"clear dates\"\n            onClear={() => {\n              set(EMPTY);\n              buttonRef.current?.focus();\n            }}\n          />\n        )}\n        {name && (\n          <>\n            <input type=\"hidden\" name={`${name}[from]`} value={range.from ? toISODate(range.from) : \"\"} />\n            <input type=\"hidden\" name={`${name}[to]`} value={range.to ? toISODate(range.to) : \"\"} />\n          </>\n        )}\n      </div>\n\n      {mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            role=\"dialog\"\n            aria-label={label ? `choose ${label}` : \"choose dates\"}\n            className=\"max-w-[calc(100vw-16px)] rounded-[16px] p-1.5\"\n            style={panelStyle}\n          >\n            <div\n              className=\"flex flex-col gap-3 rounded-[11px] bg-panel-face p-2.5 sm:flex-row\"\n              style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n            >\n              {presets && presets.length > 0 && (\n                <div className=\"flex shrink-0 flex-row flex-wrap gap-1 border-line-strong pb-2 sm:w-32 sm:flex-col sm:border-r sm:pb-0 sm:pr-2\">\n                  {presets.map((p) => (\n                    <button\n                      key={p.label}\n                      type=\"button\"\n                      onClick={() => {\n                        const r = p.range();\n                        set({ from: r.from && startOfDay(r.from), to: r.to && startOfDay(r.to) });\n                        close();\n                        buttonRef.current?.focus();\n                      }}\n                      className=\"cursor-pointer rounded-[8px] px-2.5 py-1.5 text-left text-[12.5px] text-ink-body transition-colors hover:bg-surface-active hover:text-ink focus-visible:outline-2 focus-visible:outline-ink\"\n                    >\n                      {p.label}\n                    </button>\n                  ))}\n                </div>\n              )}\n              <div className=\"flex flex-col gap-2\">\n                <Calendar\n                  range={shown}\n                  onChange={pickDay}\n                  onDayHover={setHover}\n                  months={singleMonth ? 1 : 2}\n                  min={min}\n                  max={max}\n                  isDateDisabled={isDateDisabled}\n                  weekStartsOn={weekStartsOn}\n                  locale={locale}\n                  autoFocus\n                />\n                <p aria-live=\"polite\" className=\"px-1 text-[11.5px] text-ink-faint\">\n                  {draft ? \"now pick the last day\" : \"pick the first day\"}\n                </p>\n              </div>\n            </div>\n          </div>\n        </Portal>\n      )}\n      <FieldMessage id={messageId} error={error} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,OAAO,QAAQ,gBAAgB;AAC/C,SAAS,UAAU,cAAc,UAAqB,SAAS,YAAY,iBAAiB;AAC5F,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoB;AACzC,SAAS,wBAAwB;AAyHjB,SAyCN,UAzCM,KAIR,YAJQ;AAvFhB,IAAM,QAAmB,EAAE,MAAM,MAAM,IAAI,KAAK;AAMzC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AACd,GAAyB;AACvB,QAAM,MAAM,MAAM;AAClB,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAoB,YAAY;AAChE,QAAM,QAAQ,SAAS;AAEvB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AACpD,QAAM,EAAE,MAAM,SAAS,QAAQ,OAAO,aAAa,WAAW,IAAI,iBAAiB,KAAK;AAAA,IACtF,UAAU,MAAM,UAAU,SAAS,MAAM;AAAA,EAC3C,CAAC;AACD,QAAM,YAAY,SAAS,OAAO,GAAG,GAAG,aAAa;AAGrD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,CAAC,MAAM;AACT,eAAS,IAAI;AACb,eAAS,IAAI;AAAA,IACf;AAAA,EACF;AAEA,QAAM,MAAM,CAAC,MAAiB;AAC5B,gBAAY,CAAC;AACb,eAAW,CAAC;AAAA,EACd;AAEA,QAAM,UAAU,CAAC,MAAY;AAC3B,QAAI,CAAC,OAAO;AACV,eAAS,CAAC;AACV;AAAA,IACF;AACA,UAAM,CAAC,MAAM,EAAE,IAAI,IAAI,QAAQ,CAAC,GAAG,KAAK,IAAI,CAAC,OAAO,CAAC;AACrD,QAAI,EAAE,MAAM,GAAG,CAAC;AAChB,aAAS,IAAI;AACb,UAAM;AACN,cAAU,SAAS,MAAM;AAAA,EAC3B;AAGA,QAAM,QAAmB,QACrB,SAAS,CAAC,QAAQ,OAAO,KAAK,IAC5B,QAAQ,QACN,EAAE,MAAM,OAAO,IAAI,MAAM,IACzB,EAAE,MAAM,OAAO,IAAI,MAAM,IAC3B,EAAE,MAAM,OAAO,IAAI,MAAM,IAC3B;AAEJ,QAAM,MAAM,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,SAAS,KAAK,WAAW,MAAM,UAAU,CAAC;AAC/F,QAAM,OACJ,MAAM,QAAQ,MAAM;AAAA;AAAA,IAEhB,IAAI,YAAY,MAAM,MAAM,MAAM,EAAE;AAAA,MACpC,MAAM,OACJ,GAAG,IAAI,OAAO,MAAM,IAAI,CAAC,YACzB;AAER,SACE,qBAAC,SAAI,WAAW,CAAC,qCAAqC,YAAY,WAAW,EAAE,EAAE,KAAK,GAAG,GACtF;AAAA,aAAS,oBAAC,cAAW,IAAI,GAAG,GAAG,UAAW,iBAAM;AAAA,IACjD,qBAAC,SAAI,KAAU,WAAW,CAAC,YAAY,YAAY,WAAW,qBAAqB,SAAS,EAAE,KAAK,GAAG,GAGpG;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,SAAS;AAAA,UACT,iBAAc;AAAA,UACd,iBAAe;AAAA,UACf,mBAAiB,QAAQ,GAAG,GAAG,UAAU,GAAG,WAAW;AAAA,UACvD,gBAAc,QAAQ,OAAO;AAAA,UAC7B,oBAAkB;AAAA,UAClB,aAAW,QAAQ;AAAA,UACnB,WAAW;AAAA,YACT;AAAA,YACA,aAAa,MAAM,OAAO,UAAU;AAAA,YACpC;AAAA,UACF,EAAE,KAAK,GAAG;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,OAAO,4BAA4B;AAAA,gBACrC,EAAE,KAAK,GAAG;AAAA;AAAA,YACZ;AAAA,YACA,oBAAC,UAAK,IAAI,GAAG,GAAG,UAAU,WAAW,CAAC,yBAAyB,OAAO,yBAAyB,gBAAgB,EAAE,KAAK,GAAG,GACtH,kBAAQ,aACX;AAAA;AAAA;AAAA,MACF;AAAA,MACC,aAAa,MAAM,QAAQ,CAAC,YAC3B;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAS,MAAM;AACb,gBAAI,KAAK;AACT,sBAAU,SAAS,MAAM;AAAA,UAC3B;AAAA;AAAA,MACF;AAAA,MAED,QACC,iCACE;AAAA,4BAAC,WAAM,MAAK,UAAS,MAAM,GAAG,IAAI,UAAU,OAAO,MAAM,OAAO,UAAU,MAAM,IAAI,IAAI,IAAI;AAAA,QAC5F,oBAAC,WAAM,MAAK,UAAS,MAAM,GAAG,IAAI,QAAQ,OAAO,MAAM,KAAK,UAAU,MAAM,EAAE,IAAI,IAAI;AAAA,SACxF;AAAA,OAEJ;AAAA,IAEC,WACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY,QAAQ,UAAU,KAAK,KAAK;AAAA,QACxC,WAAU;AAAA,QACV,OAAO;AAAA,QAEP;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,WAAW,2BAA2B;AAAA,YAE9C;AAAA,yBAAW,QAAQ,SAAS,KAC3B,oBAAC,SAAI,WAAU,kHACZ,kBAAQ,IAAI,CAAC,MACZ;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,SAAS,MAAM;AACb,0BAAM,IAAI,EAAE,MAAM;AAClB,wBAAI,EAAE,MAAM,EAAE,QAAQ,WAAW,EAAE,IAAI,GAAG,IAAI,EAAE,MAAM,WAAW,EAAE,EAAE,EAAE,CAAC;AACxE,0BAAM;AACN,8BAAU,SAAS,MAAM;AAAA,kBAC3B;AAAA,kBACA,WAAU;AAAA,kBAET,YAAE;AAAA;AAAA,gBAVE,EAAE;AAAA,cAWT,CACD,GACH;AAAA,cAEF,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,QAAQ,cAAc,IAAI;AAAA,oBAC1B;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,WAAS;AAAA;AAAA,gBACX;AAAA,gBACA,oBAAC,OAAE,aAAU,UAAS,WAAU,qCAC7B,kBAAQ,0BAA0B,sBACrC;AAAA,iBACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,IAEF,oBAAC,gBAAa,IAAI,WAAW,OAAc,MAAY;AAAA,KACzD;AAEJ;","names":[]}

package/dist/Drawer.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    actions?: React.ReactNode;
+    side?: "left" | "right";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+declare function Drawer({ open, onClose, title, description, children, actions, side, size, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+
+export { Drawer };

package/dist/Drawer.js

@@ -0,0 +1,132 @@
+"use client";
+
+// ../../components/ui/Drawer.tsx
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Portal } from "./Floating.js";
+import { CloseButton } from "./CloseButton.js";
+import { useModalBehavior } from "./useModalBehavior.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ENTER_MS = 380;
+var EXIT_MS = 240;
+var sizeMap = {
+  sm: "max-w-xs",
+  md: "max-w-md",
+  lg: "max-w-lg"
+};
+function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  side = "right",
+  size = "md",
+  className = ""
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const panelRef = useRef(null);
+  const uid = useId();
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  useEffect(() => {
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), EXIT_MS);
+    return () => clearTimeout(t);
+  }, [open, mounted]);
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+    void panelRef.current?.getBoundingClientRect();
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+  useModalBehavior({ open, ready: visible, ref: panelRef, onClose });
+  if (!mounted) return null;
+  const isRight = side === "right";
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-90", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-0 backdrop-blur-[6px] transition-opacity ease-out",
+        style: {
+          background: "var(--scrim)",
+          opacity: visible ? 1 : 0,
+          transitionDuration: `${visible ? ENTER_MS : EXIT_MS}ms`
+        },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "absolute inset-y-0 w-full p-2 flex",
+          isRight ? "right-0 justify-end" : "left-0 justify-start"
+        ].join(" "),
+        style: { pointerEvents: "none" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? `${uid}-title` : void 0,
+            "aria-describedby": description ? `${uid}-desc` : void 0,
+            className: [
+              "relative h-full w-full rounded-[22px] p-1.5 flex flex-col pointer-events-auto",
+              sizeMap[size],
+              className
+            ].filter(Boolean).join(" "),
+            style: {
+              background: "var(--panel-bezel)",
+              boxShadow: "var(--modal-shadow)",
+              transform: visible ? "translateX(0)" : isRight ? "translateX(calc(100% + 16px))" : "translateX(calc(-100% - 16px))",
+              transition: `transform ${visible ? ENTER_MS : EXIT_MS}ms ${visible ? "var(--ease-out-soft)" : "cubic-bezier(0.4,0,1,1)"}`
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex flex-col h-full bg-panel-face rounded-[16px] overflow-hidden",
+                style: { boxShadow: "var(--panel-face-shadow)" },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "pl-6 pr-4 pt-5 pb-4 flex items-start gap-4 shrink-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1.5 pt-1", children: [
+                      title && /* @__PURE__ */ jsx(
+                        "h2",
+                        {
+                          id: `${uid}-title`,
+                          className: "text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug",
+                          children: title
+                        }
+                      ),
+                      description && /* @__PURE__ */ jsx("p", { id: `${uid}-desc`, className: "text-[13px] text-ink-muted leading-relaxed", children: description })
+                    ] }),
+                    /* @__PURE__ */ jsx(CloseButton, { label: "Close drawer", onClick: onClose })
+                  ] }),
+                  children && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto scroll-thin px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed", children }),
+                  actions && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "mt-auto px-5 py-3.5 flex items-center justify-end gap-2 shrink-0",
+                      style: {
+                        background: "var(--panel-tray)",
+                        boxShadow: "inset 0 1px 0 var(--hairline)"
+                      },
+                      children: actions
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  Drawer
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { Portal } from \"./Floating\";\nimport { CloseButton } from \"./CloseButton\";\nimport { useModalBehavior } from \"./useModalBehavior\";\n\ninterface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n  actions?: React.ReactNode;\n  side?: \"left\" | \"right\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\nconst ENTER_MS = 380;\nconst EXIT_MS = 240;\n\nconst sizeMap = {\n  sm: \"max-w-xs\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n} as const;\n\nexport function Drawer({\n  open,\n  onClose,\n  title,\n  description,\n  children,\n  actions,\n  side = \"right\",\n  size = \"md\",\n  className = \"\",\n}: DrawerProps) {\n  const [mounted, setMounted] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const uid = useId();\n\n  /* ── mount / unmount ────────────────────────────────── */\n  /* Mounting on open and sliding out on close happen during render, so\n     neither waits for an extra commit; only the unmount is delayed */\n  if (open && !mounted) setMounted(true);\n  if (!open && visible) setVisible(false);\n\n  useEffect(() => {\n    if (open || !mounted) return;\n    const t = setTimeout(() => setMounted(false), EXIT_MS);\n    return () => clearTimeout(t);\n  }, [open, mounted]);\n\n  /* ── trigger enter animation after mount ────────────── */\n  useLayoutEffect(() => {\n    if (!mounted || !open || visible) return;\n    void panelRef.current?.getBoundingClientRect();\n    const id = requestAnimationFrame(() => setVisible(true));\n    return () => cancelAnimationFrame(id);\n  }, [mounted, open, visible]);\n\n  /* ── Escape, focus trap + restore, scroll lock ─────── */\n  useModalBehavior({ open, ready: visible, ref: panelRef, onClose });\n\n  if (!mounted) return null;\n\n  const isRight = side === \"right\";\n\n  return (\n    <Portal>\n    <div className=\"fixed inset-0 z-90\">\n      <div\n        aria-hidden\n        className=\"absolute inset-0 backdrop-blur-[6px] transition-opacity ease-out\"\n        style={{\n          background: \"var(--scrim)\",\n          opacity: visible ? 1 : 0,\n          transitionDuration: `${visible ? ENTER_MS : EXIT_MS}ms`,\n        }}\n        onClick={onClose}\n      />\n\n      {/* Floats a few px off the viewport edge so it reads as a panel, not a wall */}\n      <div\n        className={[\n          \"absolute inset-y-0 w-full p-2 flex\",\n          isRight ? \"right-0 justify-end\" : \"left-0 justify-start\",\n        ].join(\" \")}\n        style={{ pointerEvents: \"none\" }}\n      >\n        <div\n          ref={panelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? `${uid}-title` : undefined}\n          aria-describedby={description ? `${uid}-desc` : undefined}\n          className={[\n            \"relative h-full w-full rounded-[22px] p-1.5 flex flex-col pointer-events-auto\",\n            sizeMap[size],\n            className,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n          style={{\n            background: \"var(--panel-bezel)\",\n            boxShadow: \"var(--modal-shadow)\",\n            transform: visible\n              ? \"translateX(0)\"\n              : isRight\n                ? \"translateX(calc(100% + 16px))\"\n                : \"translateX(calc(-100% - 16px))\",\n            transition: `transform ${visible ? ENTER_MS : EXIT_MS}ms ${\n              visible ? \"var(--ease-out-soft)\" : \"cubic-bezier(0.4,0,1,1)\"\n            }`,\n          }}\n        >\n          <div\n            className=\"flex flex-col h-full bg-panel-face rounded-[16px] overflow-hidden\"\n            style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n          >\n            <div className=\"pl-6 pr-4 pt-5 pb-4 flex items-start gap-4 shrink-0\">\n              <div className=\"flex-1 min-w-0 flex flex-col gap-1.5 pt-1\">\n                {title && (\n                  <h2\n                    id={`${uid}-title`}\n                    className=\"text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug\"\n                  >\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p id={`${uid}-desc`} className=\"text-[13px] text-ink-muted leading-relaxed\">\n                    {description}\n                  </p>\n                )}\n              </div>\n              <CloseButton label=\"Close drawer\" onClick={onClose} />\n            </div>\n\n            {children && (\n              <div className=\"flex-1 overflow-y-auto scroll-thin px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed\">\n                {children}\n              </div>\n            )}\n\n            {actions && (\n              <div\n                className=\"mt-auto px-5 py-3.5 flex items-center justify-end gap-2 shrink-0\"\n                style={{\n                  background: \"var(--panel-tray)\",\n                  boxShadow: \"inset 0 1px 0 var(--hairline)\",\n                }}\n              >\n                {actions}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n    </Portal>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/DropdownMenu.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type DropdownMenuPosition = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+interface DropdownMenuItem {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+}
+interface DropdownMenuProps {
+    trigger: ReactNode;
+    items: DropdownMenuItem[];
+    position?: DropdownMenuPosition;
+    onSelect?: (key: string) => void;
+    className?: string;
+}
+declare function DropdownMenu({ trigger, items, position, onSelect, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+export { DropdownMenu, type DropdownMenuItem };

package/dist/DropdownMenu.js

@@ -0,0 +1,185 @@
+"use client";
+
+// ../../components/ui/DropdownMenu.tsx
+import React, { useState, useRef, useEffect, useId, useCallback } from "react";
+import { Kbd } from "./Kbd.js";
+import { ENTER_FROM, LAYER, Portal, useAnchoredPosition } from "./Floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DropdownMenu({
+  trigger,
+  items,
+  position = "bottom-end",
+  onSelect,
+  className = ""
+}) {
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef(null);
+  const menuRef = useRef(null);
+  const uid = useId();
+  const [v, h] = position.split("-");
+  const { setFloating, side } = useAnchoredPosition(ref, { open: mounted, side: v, align: h });
+  const attachMenu = useCallback(
+    (el) => {
+      menuRef.current = el;
+      setFloating(el);
+    },
+    [setFloating]
+  );
+  const enabledItems = () => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []);
+  const focusItem = (index) => {
+    const list = enabledItems();
+    if (list.length === 0) return;
+    list[(index + list.length) % list.length].focus();
+  };
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(
+        () => requestAnimationFrame(() => {
+          setVisible(true);
+          enabledItems()[0]?.focus();
+        })
+      );
+    } else {
+      const t = setTimeout(() => setMounted(false), 180);
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+  useEffect(() => {
+    function onOutside(e) {
+      const t = e.target;
+      if (ref.current?.contains(t) || menuRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, []);
+  const returnFocus = () => {
+    ref.current?.querySelector("[data-menu-trigger] button, [data-menu-trigger] a")?.focus();
+  };
+  const onMenuKeyDown = (e) => {
+    const list = enabledItems();
+    const at = list.indexOf(document.activeElement);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusItem(at + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusItem(at - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusItem(0);
+        break;
+      case "End":
+        e.preventDefault();
+        focusItem(list.length - 1);
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        returnFocus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
+  function handleSelect(item) {
+    if (item.disabled) return;
+    onSelect?.(item.key);
+    setOpen(false);
+    returnFocus();
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: ["relative inline-flex", className].join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-menu-trigger": true,
+        onClick: () => {
+          setOpen(!open);
+        },
+        className: "inline-flex cursor-pointer",
+        children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-controls": open ? `${uid}-menu` : void 0
+        }) : trigger
+      }
+    ),
+    mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: attachMenu,
+        id: `${uid}-menu`,
+        role: "menu",
+        onKeyDown: onMenuKeyDown,
+        className: "min-w-[200px] rounded-[16px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]",
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: LAYER.floating,
+          transformOrigin: `${side === "top" ? "bottom" : "top"} ${h === "start" ? "left" : "right"}`,
+          opacity: visible ? 1 : 0,
+          transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.96)`,
+          background: "var(--panel-bezel)",
+          boxShadow: "var(--overlay-shadow)"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-panel-face rounded-[11px] p-1 flex flex-col",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children: items.map((item) => {
+              if (item.divider) {
+                return /* @__PURE__ */ jsx("div", { role: "separator", className: "h-px bg-line my-1 mx-2" }, item.key);
+              }
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  tabIndex: -1,
+                  onClick: () => handleSelect(item),
+                  onMouseEnter: (e) => e.currentTarget.focus(),
+                  disabled: item.disabled,
+                  className: [
+                    "group/item w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[8px] text-[13px] font-medium cursor-pointer outline-none",
+                    "transition-[background,color] duration-100",
+                    "disabled:opacity-35 disabled:pointer-events-none",
+                    item.danger ? "text-danger focus:bg-danger-wash" : "text-ink-label focus:text-ink focus:bg-surface-active/80"
+                  ].join(" "),
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [
+                          "shrink-0 w-4 h-4 flex items-center justify-center transition-colors duration-100",
+                          item.danger ? "text-danger-soft" : "text-ink-faint group-focus/item:text-ink-label"
+                        ].join(" "),
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: item.label }),
+                    item.shortcut && /* @__PURE__ */ jsx(Kbd, { className: "shrink-0", children: item.shortcut })
+                  ]
+                },
+                item.key
+              );
+            })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  DropdownMenu
+};
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/DropdownMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useEffect, useId, useCallback, ReactNode } from \"react\";\nimport { Kbd } from \"./Kbd\";\nimport { ENTER_FROM, LAYER, Portal, useAnchoredPosition } from \"./Floating\";\n\ntype DropdownMenuPosition =\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"top-start\"\n  | \"top-end\";\n\nexport interface DropdownMenuItem {\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  shortcut?: string;\n  danger?: boolean;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\ninterface DropdownMenuProps {\n  trigger: ReactNode;\n  items: DropdownMenuItem[];\n  position?: DropdownMenuPosition;\n  onSelect?: (key: string) => void;\n  className?: string;\n}\n\nexport function DropdownMenu({\n  trigger,\n  items,\n  position = \"bottom-end\",\n  onSelect,\n  className = \"\",\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const uid = useId();\n  const [v, h] = position.split(\"-\") as [\"top\" | \"bottom\", \"start\" | \"end\"];\n  // Portalled and pinned to the trigger; flips up or over when it runs out of room\n  const { setFloating, side } = useAnchoredPosition(ref, { open: mounted, side: v, align: h });\n  const attachMenu = useCallback(\n    (el: HTMLDivElement | null) => {\n      menuRef.current = el;\n      setFloating(el);\n    },\n    [setFloating],\n  );\n\n  const enabledItems = () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([disabled])') ?? []);\n\n  const focusItem = (index: number) => {\n    const list = enabledItems();\n    if (list.length === 0) return;\n    list[(index + list.length) % list.length].focus();\n  };\n\n  /* Mounted and faded out during render; the effect only times the rest */\n  if (open && !mounted) setMounted(true);\n  if (!open && visible) setVisible(false);\n\n  useEffect(() => {\n    if (open) {\n      requestAnimationFrame(() =>\n        requestAnimationFrame(() => {\n          setVisible(true);\n          // Land on the first item so arrow keys work straight away\n          enabledItems()[0]?.focus();\n        })\n      );\n    } else {\n      const t = setTimeout(() => setMounted(false), 180);\n      return () => clearTimeout(t);\n    }\n  }, [open]);\n\n  useEffect(() => {\n    function onOutside(e: MouseEvent) {\n      const t = e.target as Node;\n      if (ref.current?.contains(t) || menuRef.current?.contains(t)) return;\n      setOpen(false);\n    }\n    document.addEventListener(\"mousedown\", onOutside);\n    return () => document.removeEventListener(\"mousedown\", onOutside);\n  }, []);\n\n  const returnFocus = () => {\n    ref.current?.querySelector<HTMLElement>(\"[data-menu-trigger] button, [data-menu-trigger] a\")?.focus();\n  };\n\n  const onMenuKeyDown = (e: React.KeyboardEvent) => {\n    const list = enabledItems();\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        focusItem(at + 1);\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        focusItem(at - 1);\n        break;\n      case \"Home\":\n        e.preventDefault();\n        focusItem(0);\n        break;\n      case \"End\":\n        e.preventDefault();\n        focusItem(list.length - 1);\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setOpen(false);\n        returnFocus();\n        break;\n      case \"Tab\":\n        setOpen(false);\n        break;\n    }\n  };\n\n  function handleSelect(item: DropdownMenuItem) {\n    if (item.disabled) return;\n    onSelect?.(item.key);\n    setOpen(false);\n    returnFocus();\n  }\n\n  return (\n    <div ref={ref} className={[\"relative inline-flex\", className].join(\" \")}>\n      <div\n        data-menu-trigger\n        onClick={() => {\n          setOpen(!open);\n        }}\n        className=\"inline-flex cursor-pointer\"\n      >\n        {React.isValidElement(trigger)\n          ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {\n              \"aria-haspopup\": \"menu\",\n              \"aria-expanded\": open,\n              \"aria-controls\": open ? `${uid}-menu` : undefined,\n            })\n          : trigger}\n      </div>\n      {mounted && (\n        <Portal>\n        <div\n          ref={attachMenu}\n          id={`${uid}-menu`}\n          role=\"menu\"\n          onKeyDown={onMenuKeyDown}\n          className=\"min-w-[200px] rounded-[16px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]\"\n          style={{\n            position: \"fixed\",\n            top: 0,\n            left: 0,\n            zIndex: LAYER.floating,\n            transformOrigin: `${side === \"top\" ? \"bottom\" : \"top\"} ${h === \"start\" ? \"left\" : \"right\"}`,\n            opacity: visible ? 1 : 0,\n            transform: visible ? \"none\" : `${ENTER_FROM[side]} scale(0.96)`,\n            background: \"var(--panel-bezel)\",\n            boxShadow: \"var(--overlay-shadow)\",\n          }}\n        >\n          <div\n            className=\"bg-panel-face rounded-[11px] p-1 flex flex-col\"\n            style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n          >\n            {items.map((item) => {\n              if (item.divider) {\n                return <div key={item.key} role=\"separator\" className=\"h-px bg-line my-1 mx-2\" />;\n              }\n\n              return (\n                <button\n                  key={item.key}\n                  type=\"button\"\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  onClick={() => handleSelect(item)}\n                  onMouseEnter={(e) => e.currentTarget.focus()}\n                  disabled={item.disabled}\n                  className={[\n                    \"group/item w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[8px] text-[13px] font-medium cursor-pointer outline-none\",\n                    \"transition-[background,color] duration-100\",\n                    \"disabled:opacity-35 disabled:pointer-events-none\",\n                    item.danger\n                      ? \"text-danger focus:bg-danger-wash\"\n                      : \"text-ink-label focus:text-ink focus:bg-surface-active/80\",\n                  ].join(\" \")}\n                >\n                  {item.icon && (\n                    <span\n                      className={[\n                        \"shrink-0 w-4 h-4 flex items-center justify-center transition-colors duration-100\",\n                        item.danger ? \"text-danger-soft\" : \"text-ink-faint group-focus/item:text-ink-label\",\n                      ].join(\" \")}\n                    >\n                      {item.icon}\n                    </span>\n                  )}\n                  <span className=\"flex-1 text-left\">{item.label}</span>\n                  {item.shortcut && <Kbd className=\"shrink-0\">{item.shortcut}</Kbd>}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n        </Portal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/EmptyState.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { EmptyState };