@spear-ai/spectral 1.3.43 → 1.3.44

package/dist/MultiSelect/MultiSelectBase.js

@@ -0,0 +1,321 @@
+"use client";
+import "../styles/main.css";
+import { jsxs as a, jsx as s, Fragment as ce } from "react/jsx-runtime";
+import { c as p } from "../twUtils-CRiPKpXj.js";
+import { forwardRef as ue, useId as pe, useState as I, useRef as $, useMemo as F, useCallback as b, useEffect as me } from "react";
+import { X as K } from "../x-BBpi7a_7.js";
+import { C as be, a as fe } from "../chevron-down-UbkgS76q.js";
+import { c as ge } from "../createLucideIcon-CI1yJrZf.js";
+import { L as he } from "../loader-circle-CvdzOiQ_.js";
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const xe = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], ye = ge("search", xe), S = "h-4 w-4", ve = "h-5 w-5", Ne = (t) => ({
+  error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
+  loading: "cursor-wait border-input-border--disabled",
+  disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
+  default: ""
+})[t], we = (t, l, i) => p(
+  "flex h-12 w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-3 text-sm",
+  "hover:border-input-border--hover focus:border-input-border--focus focus:outline-none",
+  "focus:ring-2 focus:ring-black focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2",
+  "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
+  "transition duration-200 text-input-text",
+  l && "border-input-border--focus ring-2 ring-black ring-offset-2",
+  Ne(t),
+  i
+), Ce = (t) => p(
+  "absolute top-full left-0 right-0 z-50 mt-1 max-h-80 overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-lg",
+  "transition-all duration-200 origin-top",
+  t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
+), ke = (t) => {
+  const l = $(null);
+  return me(() => {
+    const i = (o) => {
+      l.current && !l.current.contains(o.target) && t();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [t]), l;
+}, Se = (t, l, i) => {
+  const [o, m] = I(-1), u = b(
+    (d) => {
+      const y = {
+        ArrowDown: () => {
+          d.preventDefault(), m((f) => Math.min(f + 1, t.length - 1));
+        },
+        ArrowUp: () => {
+          d.preventDefault(), m((f) => Math.max(f - 1, -1));
+        },
+        Enter: () => {
+          d.preventDefault(), o >= 0 && t[o] && l(t[o].value);
+        },
+        " ": () => {
+          d.preventDefault(), o >= 0 && t[o] && l(t[o].value);
+        },
+        Escape: () => {
+          d.preventDefault(), i();
+        }
+      }[d.key];
+      y && y();
+    },
+    [t, o, l, i]
+  );
+  return { focusedIndex: o, setFocusedIndex: m, handleKeyDown: u };
+}, Ie = ue(
+  ({
+    value: t = [],
+    onChange: l,
+    options: i = [],
+    placeholder: o = "Select options",
+    maxCount: m = 3,
+    state: u = "default",
+    errorMessage: d,
+    emptyMessage: O = "No options found",
+    loadingMessage: y = "Loading options...",
+    searchPlaceholder: f = "Search options...",
+    selectAllLabel: P = "Select all",
+    clearAllLabel: T = "Clear all",
+    sortAlphabetically: D = !1,
+    showSelectAll: B = !0,
+    showClearAll: G = !0,
+    showSearch: H = !0,
+    closeOnSelect: V = !1,
+    name: j,
+    id: Z,
+    label: z,
+    className: U,
+    "aria-label": X,
+    "aria-describedby": q,
+    ...L
+  }, J) => {
+    const Q = pe(), E = Z || `${j}-${Q}`, M = `${E}-error`, [g, v] = I(!1), [w, W] = I(""), Y = ke(() => v(!1)), R = $(null), C = L.disabled || u === "disabled", ee = u === "loading", te = u === "error", h = F(() => {
+      let e = i.filter((n) => n.label.toLowerCase().includes(w.toLowerCase()));
+      return D && (e = [...e].sort((n, r) => n.label.localeCompare(r.label))), e;
+    }, [i, w, D]), x = F(() => {
+      const e = {}, n = [];
+      return h.forEach((r) => {
+        r.group ? (e[r.group] || (e[r.group] = []), e[r.group].push(r)) : n.push(r);
+      }), { groups: e, ungrouped: n, hasGroups: Object.keys(e).length > 0 };
+    }, [h]), { focusedIndex: re, handleKeyDown: se } = Se(h, N, () => v(!1)), ne = b(() => {
+      C || v((e) => (e || setTimeout(() => R.current?.focus(), 0), !e));
+    }, [C]);
+    function N(e) {
+      if (i.find((c) => c.value === e)?.disabled) return;
+      const r = t.includes(e) ? t.filter((c) => c !== e) : [...t, e];
+      l(r), V && v(!1);
+    }
+    const le = b(() => {
+      const e = i.filter((r) => !r.disabled).map((r) => r.value), n = e.every((r) => t.includes(r));
+      l(n ? [] : e);
+    }, [i, t, l]), _ = b(() => {
+      l([]);
+    }, [l]), ae = b((e) => {
+      W(e.target.value);
+    }, []), ie = b(
+      (e, n) => {
+        n.stopPropagation(), N(e);
+      },
+      [N]
+    ), oe = () => {
+      if (t.length === 0)
+        return /* @__PURE__ */ s("span", { className: "text-input-text-placeholder", children: o });
+      const e = t.slice(0, m), n = t.length - m;
+      return /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-1", children: [
+        e.map((r) => {
+          const c = i.find((k) => k.value === r);
+          return c ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "bg-input-bg--selected text-input-text inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs",
+              children: [
+                c.label,
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (k) => ie(r, k),
+                    className: "hover:text-danger focus:outline-none",
+                    "aria-label": `Remove ${c.label}`,
+                    children: /* @__PURE__ */ s(K, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            r
+          ) : null;
+        }),
+        n > 0 && /* @__PURE__ */ a("span", { className: "text-input-text-secondary text-xs", children: [
+          "+",
+          n,
+          " more"
+        ] })
+      ] });
+    }, A = (e, n) => {
+      const r = t.includes(e.value);
+      return /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: p(
+            "hover:bg-input-bg--hover focus:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-left text-sm focus:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            n === re && "bg-input-bg--hover",
+            r && "text-input-text font-medium"
+          ),
+          onClick: () => N(e.value),
+          disabled: e.disabled,
+          children: [
+            /* @__PURE__ */ s(
+              "div",
+              {
+                className: p(
+                  "border-input-border flex h-4 w-4 items-center justify-center rounded border",
+                  r && "bg-primary border-primary"
+                ),
+                children: r && /* @__PURE__ */ s(fe, { className: "h-3 w-3 text-white" })
+              }
+            ),
+            /* @__PURE__ */ s("span", { children: e.label })
+          ]
+        },
+        e.value
+      );
+    }, de = () => ({
+      "--multiselect-border-radius": "0.5rem",
+      "--multiselect-trigger-height": "3rem",
+      "--multiselect-dropdown-max-height": "20rem"
+    });
+    return /* @__PURE__ */ a("div", { className: "w-full", "data-testid": "multiselect-root", children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          ref: Y,
+          className: "relative",
+          "data-testid": "multiselect-wrapper",
+          onKeyDown: g ? se : void 0,
+          children: [
+            /* @__PURE__ */ a(
+              "button",
+              {
+                ref: J,
+                type: "button",
+                id: E,
+                name: j,
+                className: we(u, g, U),
+                onClick: ne,
+                disabled: C,
+                "aria-label": X || z,
+                "aria-describedby": p(te && M, q),
+                "aria-expanded": g,
+                "aria-haspopup": "listbox",
+                "data-state": u,
+                style: de(),
+                ...L,
+                children: [
+                  /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: oe() }),
+                  /* @__PURE__ */ a("div", { className: "ml-2 flex items-center gap-2", children: [
+                    t.length > 0 && /* @__PURE__ */ s(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation(), _();
+                        },
+                        className: "text-input-icon hover:text-input-icon--hover focus:outline-none",
+                        "aria-label": "Clear all selections",
+                        children: /* @__PURE__ */ s(K, { className: S })
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      be,
+                      {
+                        className: p(
+                          ve,
+                          "text-input-icon transition-transform duration-200",
+                          g && "rotate-180"
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ s("div", { className: Ce(g), "data-testid": "multiselect-dropdown", children: /* @__PURE__ */ a("div", { className: "p-1", children: [
+              H && /* @__PURE__ */ a("div", { className: "relative mb-2", children: [
+                /* @__PURE__ */ s(ye, { className: p(S, "text-input-icon absolute top-1/2 left-3 -translate-y-1/2") }),
+                /* @__PURE__ */ s(
+                  "input",
+                  {
+                    ref: R,
+                    type: "text",
+                    className: "border-input-border bg-input-bg focus:border-input-border--focus w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-1 focus:ring-black focus:outline-none",
+                    placeholder: f,
+                    value: w,
+                    onChange: ae,
+                    "aria-label": "Search options"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { className: "max-h-64 overflow-y-auto", role: "listbox", "aria-multiselectable": "true", children: ee ? /* @__PURE__ */ a("div", { className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
+                /* @__PURE__ */ s(he, { className: p(S, "animate-spin") }),
+                y
+              ] }) : h.length === 0 ? /* @__PURE__ */ s("div", { className: "text-input-text-secondary py-6 text-center text-sm", children: O }) : /* @__PURE__ */ a(ce, { children: [
+                B && /* @__PURE__ */ a("div", { className: "mb-1", children: [
+                  /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-input-text-secondary hover:bg-input-bg--hover focus:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none",
+                      onClick: le,
+                      children: P
+                    }
+                  ),
+                  /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" })
+                ] }),
+                x.ungrouped.length > 0 && /* @__PURE__ */ s("div", { className: "mb-1", children: x.ungrouped.map((e, n) => A(e, n)) }),
+                Object.entries(x.groups).map(([e, n]) => /* @__PURE__ */ a("div", { className: "mb-1", children: [
+                  (x.ungrouped.length > 0 || Object.keys(x.groups).indexOf(e) > 0) && /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" }),
+                  /* @__PURE__ */ s("div", { className: "text-input-text-secondary px-3 py-1 text-xs font-semibold tracking-wide uppercase", children: e }),
+                  n.map((r, c) => A(r, h.indexOf(r)))
+                ] }, e)),
+                G && t.length > 0 && /* @__PURE__ */ a("div", { className: "mt-1", children: [
+                  /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" }),
+                  /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-danger hover:bg-danger-50 focus:bg-danger-50 flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none",
+                      onClick: _,
+                      children: T
+                    }
+                  )
+                ] })
+              ] }) })
+            ] }) })
+          ]
+        }
+      ),
+      u === "error" && d && /* @__PURE__ */ s(
+        "p",
+        {
+          id: M,
+          className: "text-danger-500 mt-1.5 text-sm",
+          "data-testid": "multiselect-error-message",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: d
+        }
+      )
+    ] });
+  }
+);
+Ie.displayName = "MultiSelectBase";
+export {
+  Ie as MultiSelectBase
+};

package/dist/MultiSelect/MutiSelect.d.ts

@@ -0,0 +1,15 @@
+import { MultiSelectBaseProps } from './MultiSelectBase';
+export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'onChange' | 'options'> {
+    onValueChange: (value: string[]) => void;
+    options: Array<{
+        label: string;
+        value: string;
+        group?: string;
+    }>;
+    loading?: boolean;
+    emptyText?: string;
+    sortAlphabetically?: boolean;
+    onSearchChange?: (search: string) => void;
+}
+export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=MutiSelect.d.ts.map

package/dist/MultiSelect/MutiSelect.js

@@ -0,0 +1,30 @@
+"use client";
+import "../styles/main.css";
+import { jsx as m } from "react/jsx-runtime";
+import { MultiSelectBase as p } from "./MultiSelectBase.js";
+import { forwardRef as u } from "react";
+const f = u(
+  ({ onValueChange: t, options: a, loading: l = !1, emptyText: o = "No matches found.", state: s, ...r }, i) => {
+    const d = a.map((e) => ({
+      label: e.label,
+      value: e.value,
+      group: e.group,
+      disabled: !1
+    }));
+    return /* @__PURE__ */ m(
+      p,
+      {
+        ref: i,
+        onChange: t,
+        options: d,
+        state: l ? "loading" : s,
+        emptyMessage: o,
+        ...r
+      }
+    );
+  }
+);
+f.displayName = "MultiSelect";
+export {
+  f as MultiSelect
+};

package/dist/Popover.d.ts

@@ -5,7 +5,7 @@ export type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content
 };
 declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, width, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, side, sideOffset, width, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
 //# sourceMappingURL=Popover.d.ts.map

package/dist/Popover.js

@@ -10,22 +10,22 @@ var C = "Popover", [E, he] = z(C, [
   b
 ]), g = b(), [X, l] = E(C), F = (e) => {
   const {
-    __scopePopover: a,
-    children: t,
-    open: r,
+    __scopePopover: n,
+    children: r,
+    open: a,
     defaultOpen: o,
-    onOpenChange: n,
+    onOpenChange: t,
     modal: c = !1
-  } = e, p = g(a), f = i.useRef(null), [v, h] = i.useState(!1), [m, u] = L({
-    prop: r,
+  } = e, p = g(n), f = i.useRef(null), [v, h] = i.useState(!1), [m, u] = L({
+    prop: a,
     defaultProp: o ?? !1,
-    onChange: n,
+    onChange: t,
     caller: C
   });
   return /* @__PURE__ */ s(q, { ...p, children: /* @__PURE__ */ s(
     X,
     {
-      scope: a,
+      scope: n,
       contentId: G(),
       triggerRef: f,
       open: m,
@@ -35,21 +35,21 @@ var C = "Popover", [E, he] = z(C, [
       onCustomAnchorAdd: i.useCallback(() => h(!0), []),
       onCustomAnchorRemove: i.useCallback(() => h(!1), []),
       modal: c,
-      children: t
+      children: r
     }
   ) });
 };
 F.displayName = C;
 var N = "PopoverAnchor", y = i.forwardRef(
-  (e, a) => {
-    const { __scopePopover: t, ...r } = e, o = l(N, t), n = g(t), { onCustomAnchorAdd: c, onCustomAnchorRemove: p } = o;
-    return i.useEffect(() => (c(), () => p()), [c, p]), /* @__PURE__ */ s(w, { ...n, ...r, ref: a });
+  (e, n) => {
+    const { __scopePopover: r, ...a } = e, o = l(N, r), t = g(r), { onCustomAnchorAdd: c, onCustomAnchorRemove: p } = o;
+    return i.useEffect(() => (c(), () => p()), [c, p]), /* @__PURE__ */ s(w, { ...t, ...a, ref: n });
   }
 );
 y.displayName = N;
 var S = "PopoverTrigger", D = i.forwardRef(
-  (e, a) => {
-    const { __scopePopover: t, ...r } = e, o = l(S, t), n = g(t), c = O(a, o.triggerRef), p = /* @__PURE__ */ s(
+  (e, n) => {
+    const { __scopePopover: r, ...a } = e, o = l(S, r), t = g(r), c = O(n, o.triggerRef), p = /* @__PURE__ */ s(
       _.button,
       {
         type: "button",
@@ -57,50 +57,50 @@ var S = "PopoverTrigger", D = i.forwardRef(
         "aria-expanded": o.open,
         "aria-controls": o.contentId,
         "data-state": $(o.open),
-        ...r,
+        ...a,
         ref: c,
         onClick: P(e.onClick, o.onOpenToggle)
       }
     );
-    return o.hasCustomAnchor ? p : /* @__PURE__ */ s(w, { asChild: !0, ...n, children: p });
+    return o.hasCustomAnchor ? p : /* @__PURE__ */ s(w, { asChild: !0, ...t, children: p });
   }
 );
 D.displayName = S;
 var A = "PopoverPortal", [Y, ee] = E(A, {
   forceMount: void 0
 }), M = (e) => {
-  const { __scopePopover: a, forceMount: t, children: r, container: o } = e, n = l(A, a);
-  return /* @__PURE__ */ s(Y, { scope: a, forceMount: t, children: /* @__PURE__ */ s(x, { present: t || n.open, children: /* @__PURE__ */ s(H, { asChild: !0, container: o, children: r }) }) });
+  const { __scopePopover: n, forceMount: r, children: a, container: o } = e, t = l(A, n);
+  return /* @__PURE__ */ s(Y, { scope: n, forceMount: r, children: /* @__PURE__ */ s(x, { present: r || t.open, children: /* @__PURE__ */ s(H, { asChild: !0, container: o, children: a }) }) });
 };
 M.displayName = A;
 var d = "PopoverContent", T = i.forwardRef(
-  (e, a) => {
-    const t = ee(d, e.__scopePopover), { forceMount: r = t.forceMount, ...o } = e, n = l(d, e.__scopePopover);
-    return /* @__PURE__ */ s(x, { present: r || n.open, children: n.modal ? /* @__PURE__ */ s(te, { ...o, ref: a }) : /* @__PURE__ */ s(re, { ...o, ref: a }) });
+  (e, n) => {
+    const r = ee(d, e.__scopePopover), { forceMount: a = r.forceMount, ...o } = e, t = l(d, e.__scopePopover);
+    return /* @__PURE__ */ s(x, { present: a || t.open, children: t.modal ? /* @__PURE__ */ s(te, { ...o, ref: n }) : /* @__PURE__ */ s(re, { ...o, ref: n }) });
   }
 );
 T.displayName = d;
 var oe = K("PopoverContent.RemoveScroll"), te = i.forwardRef(
-  (e, a) => {
-    const t = l(d, e.__scopePopover), r = i.useRef(null), o = O(a, r), n = i.useRef(!1);
+  (e, n) => {
+    const r = l(d, e.__scopePopover), a = i.useRef(null), o = O(n, a), t = i.useRef(!1);
     return i.useEffect(() => {
-      const c = r.current;
+      const c = a.current;
       if (c) return U(c);
     }, []), /* @__PURE__ */ s(V, { as: oe, allowPinchZoom: !0, children: /* @__PURE__ */ s(
       k,
       {
         ...e,
         ref: o,
-        trapFocus: t.open,
+        trapFocus: r.open,
         disableOutsidePointerEvents: !0,
         onCloseAutoFocus: P(e.onCloseAutoFocus, (c) => {
-          c.preventDefault(), n.current || t.triggerRef.current?.focus();
+          c.preventDefault(), t.current || r.triggerRef.current?.focus();
         }),
         onPointerDownOutside: P(
           e.onPointerDownOutside,
           (c) => {
             const p = c.detail.originalEvent, f = p.button === 0 && p.ctrlKey === !0, v = p.button === 2 || f;
-            n.current = v;
+            t.current = v;
           },
           { checkForDefaultPrevented: !1 }
         ),
@@ -113,48 +113,48 @@ var oe = K("PopoverContent.RemoveScroll"), te = i.forwardRef(
     ) });
   }
 ), re = i.forwardRef(
-  (e, a) => {
-    const t = l(d, e.__scopePopover), r = i.useRef(!1), o = i.useRef(!1);
+  (e, n) => {
+    const r = l(d, e.__scopePopover), a = i.useRef(!1), o = i.useRef(!1);
     return /* @__PURE__ */ s(
       k,
       {
         ...e,
-        ref: a,
+        ref: n,
         trapFocus: !1,
         disableOutsidePointerEvents: !1,
-        onCloseAutoFocus: (n) => {
-          e.onCloseAutoFocus?.(n), n.defaultPrevented || (r.current || t.triggerRef.current?.focus(), n.preventDefault()), r.current = !1, o.current = !1;
+        onCloseAutoFocus: (t) => {
+          e.onCloseAutoFocus?.(t), t.defaultPrevented || (a.current || r.triggerRef.current?.focus(), t.preventDefault()), a.current = !1, o.current = !1;
         },
-        onInteractOutside: (n) => {
-          e.onInteractOutside?.(n), n.defaultPrevented || (r.current = !0, n.detail.originalEvent.type === "pointerdown" && (o.current = !0));
-          const c = n.target;
-          t.triggerRef.current?.contains(c) && n.preventDefault(), n.detail.originalEvent.type === "focusin" && o.current && n.preventDefault();
+        onInteractOutside: (t) => {
+          e.onInteractOutside?.(t), t.defaultPrevented || (a.current = !0, t.detail.originalEvent.type === "pointerdown" && (o.current = !0));
+          const c = t.target;
+          r.triggerRef.current?.contains(c) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && o.current && t.preventDefault();
         }
       }
     );
   }
 ), k = i.forwardRef(
-  (e, a) => {
+  (e, n) => {
     const {
-      __scopePopover: t,
-      trapFocus: r,
+      __scopePopover: r,
+      trapFocus: a,
       onOpenAutoFocus: o,
-      onCloseAutoFocus: n,
+      onCloseAutoFocus: t,
       disableOutsidePointerEvents: c,
       onEscapeKeyDown: p,
       onPointerDownOutside: f,
       onFocusOutside: v,
       onInteractOutside: h,
       ...m
-    } = e, u = l(d, t), R = g(t);
+    } = e, u = l(d, r), R = g(r);
     return W(), /* @__PURE__ */ s(
       Z,
       {
         asChild: !0,
         loop: !0,
-        trapped: r,
+        trapped: a,
         onMountAutoFocus: o,
-        onUnmountAutoFocus: n,
+        onUnmountAutoFocus: t,
         children: /* @__PURE__ */ s(
           j,
           {
@@ -173,7 +173,7 @@ var oe = K("PopoverContent.RemoveScroll"), te = i.forwardRef(
                 id: u.contentId,
                 ...R,
                 ...m,
-                ref: a,
+                ref: n,
                 style: {
                   ...m.style,
                   "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
@@ -190,14 +190,14 @@ var oe = K("PopoverContent.RemoveScroll"), te = i.forwardRef(
     );
   }
 ), I = "PopoverClose", ne = i.forwardRef(
-  (e, a) => {
-    const { __scopePopover: t, ...r } = e, o = l(I, t);
+  (e, n) => {
+    const { __scopePopover: r, ...a } = e, o = l(I, r);
     return /* @__PURE__ */ s(
       _.button,
       {
         type: "button",
-        ...r,
-        ref: a,
+        ...a,
+        ref: n,
         onClick: P(e.onClick, () => o.onOpenChange(!1))
       }
     );
@@ -205,9 +205,9 @@ var oe = K("PopoverContent.RemoveScroll"), te = i.forwardRef(
 );
 ne.displayName = I;
 var ae = "PopoverArrow", se = i.forwardRef(
-  (e, a) => {
-    const { __scopePopover: t, ...r } = e, o = g(t);
-    return /* @__PURE__ */ s(J, { ...o, ...r, ref: a });
+  (e, n) => {
+    const { __scopePopover: r, ...a } = e, o = g(r);
+    return /* @__PURE__ */ s(J, { ...o, ...a, ref: n });
   }
 );
 se.displayName = ae;
@@ -223,17 +223,19 @@ function Ce({ ...e }) {
 }
 function Re({
   className: e,
-  align: a = "center",
-  sideOffset: t = 4,
-  width: r = "w-fit",
-  ...o
+  align: n = "center",
+  side: r = "bottom",
+  sideOffset: a = 4,
+  width: o = "w-fit",
+  ...t
 }) {
   return /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(
     ue,
     {
       "data-slot": "popover-content",
-      align: a,
-      sideOffset: t,
+      align: n,
+      side: r,
+      sideOffset: a,
       className: Q(
         "bg-popover-bg text-popover-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
         "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
@@ -243,9 +245,9 @@ function Re({
         e
       ),
       style: {
-        "--popover-width": typeof r == "number" ? `${r}px` : r === "w-fit" ? "320px" : r
+        "--popover-width": typeof o == "number" ? `${o}px` : o === "w-fit" ? "320px" : o
       },
-      ...o
+      ...t
     }
   ) });
 }