@salemcobalt/ui 0.2.0-rc.7 → 0.2.0-rc.9

package/dist/index.js

@@ -14,6 +14,8 @@ function Button({
   iconEnd,
   loading = false,
   fullWidth = false,
+  shortcut,
+  iconOnly = false,
   type = "button",
   className,
   children,
@@ -36,6 +38,7 @@ function Button({
       "data-size": size,
       "data-loading": loading || void 0,
       "data-full-width": fullWidth || void 0,
+      "data-icon-only": iconOnly || void 0,
       "aria-busy": loading || void 0,
       onClick: handleClick,
       ...rest,
@@ -43,6 +46,7 @@ function Button({
         iconStart ? /* @__PURE__ */ jsx("span", { className: "sc-button__icon", "aria-hidden": "true", children: iconStart }) : null,
         /* @__PURE__ */ jsx("span", { className: "sc-button__label", children }),
         iconEnd ? /* @__PURE__ */ jsx("span", { className: "sc-button__icon", "aria-hidden": "true", children: iconEnd }) : null,
+        shortcut ? /* @__PURE__ */ jsx("span", { className: "sc-button__shortcut", "aria-hidden": "true", children: shortcut }) : null,
         loading ? /* @__PURE__ */ jsx("span", { className: "sc-button__spinner", "aria-hidden": "true" }) : null
       ]
     }
@@ -596,6 +600,7 @@ function IconButton({
   tooltipSide = "top",
   round = false,
   loading = false,
+  dot,
   type,
   className,
   onClick,
@@ -628,7 +633,8 @@ function IconButton({
       ...rest,
       children: /* @__PURE__ */ jsxs7(Fragment2, { children: [
         /* @__PURE__ */ jsx8("span", { className: "sc-button__icon", "aria-hidden": "true", children }),
-        loading ? /* @__PURE__ */ jsx8("span", { className: "sc-button__spinner", "aria-hidden": "true" }) : null
+        loading ? /* @__PURE__ */ jsx8("span", { className: "sc-button__spinner", "aria-hidden": "true" }) : null,
+        dot ? /* @__PURE__ */ jsx8("span", { className: "sc-icon-button__dot", "data-tone": dot, "aria-hidden": "true" }) : null
       ] })
     }
   });
@@ -1119,11 +1125,20 @@ function Root3({ className, onValueChange, ...rest }) {
     }
   );
 }
-function List({ fill = false, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs14(BaseTabs.List, { className: cx("sc-tabs__list", className), "data-fill": fill || void 0, ...rest, children: [
-    children,
-    /* @__PURE__ */ jsx16(BaseTabs.Indicator, { className: "sc-tabs__indicator" })
-  ] });
+function List({ fill = false, variant = "line", className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs14(
+    BaseTabs.List,
+    {
+      className: cx("sc-tabs__list", className),
+      "data-fill": fill || void 0,
+      "data-variant": variant,
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx16(BaseTabs.Indicator, { className: "sc-tabs__indicator" })
+      ]
+    }
+  );
 }
 function Tab({ icon, count, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs14(BaseTabs.Tab, { className: cx("sc-tabs__tab", className), ...rest, children: [
@@ -1342,16 +1357,16 @@ function Text({
   style,
   ...rest
 }) {
-  const clamp = typeof truncate === "number" ? truncate : void 0;
+  const clamp2 = typeof truncate === "number" ? truncate : void 0;
   return createElement4(as, {
     className: cx("sc-text", className),
     "data-size": size,
     "data-tone": tone,
     "data-weight": weight,
     "data-align": align,
-    "data-truncate": truncate === true ? "" : clamp !== void 0 ? "clamp" : void 0,
+    "data-truncate": truncate === true ? "" : clamp2 !== void 0 ? "clamp" : void 0,
     "data-numeric": numeric || void 0,
-    style: clamp !== void 0 ? { ...style, "--sc-text-lines": clamp } : style,
+    style: clamp2 !== void 0 ? { ...style, "--sc-text-lines": clamp2 } : style,
     ...rest
   });
 }
@@ -1734,6 +1749,790 @@ function Skeleton({
   );
 }
 
+// src/components/FileInput/FileInput.tsx
+import { useEffect as useEffect2, useId as useId3, useRef as useRef2, useState as useState4 } from "react";
+
+// src/components/FileInput/accept.ts
+function parseAccept(accept) {
+  if (accept == null) return [];
+  const list = typeof accept === "string" ? accept.split(",") : accept;
+  return list.map((entry) => entry.trim().toLowerCase()).filter(Boolean);
+}
+function matchesAccept(file, accept) {
+  if (accept.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.some((entry) => {
+    if (entry.startsWith(".")) return name.endsWith(entry);
+    if (entry.endsWith("/*")) return type.startsWith(entry.slice(0, -1));
+    return type === entry;
+  });
+}
+var UNITS = { b: 1, kb: 1e3, mb: 1e6, gb: 1e9 };
+function parseSize(size) {
+  if (size == null) return void 0;
+  if (typeof size === "number") return size;
+  const match = /^\s*(\d+(?:\.\d+)?)\s*(b|kb|mb|gb)\s*$/i.exec(size);
+  if (!match) throw new Error(`FileInput: maxFileSize "${size}" is not a size like "10MB".`);
+  return Math.round(Number(match[1]) * UNITS[match[2].toLowerCase()]);
+}
+function formatSize(bytes) {
+  const [unit, base] = bytes >= 1e9 ? ["GB", 1e9] : bytes >= 1e6 ? ["MB", 1e6] : bytes >= 1e3 ? ["KB", 1e3] : ["bytes", 1];
+  const value = bytes / base;
+  return `${Number.isInteger(value) ? value : Number(value.toFixed(1))} ${unit}`;
+}
+var MIME_NAMES = {
+  "application/pdf": "PDF",
+  "application/msword": "DOC",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/json": "JSON",
+  "text/plain": "plain text",
+  "text/markdown": "Markdown",
+  "text/csv": "CSV",
+  "image/png": "PNG",
+  "image/jpeg": "JPEG"
+};
+function describeAccept(accept) {
+  const names = accept.map((entry) => {
+    if (entry.startsWith(".")) return entry.slice(1).toUpperCase();
+    if (entry.endsWith("/*")) return `any ${entry.slice(0, -2)}`;
+    return MIME_NAMES[entry] ?? entry.split("/").pop().toUpperCase();
+  });
+  const unique = [...new Set(names)];
+  if (unique.length <= 1) return unique[0] ?? "";
+  return `${unique.slice(0, -1).join(", ")} or ${unique.at(-1)}`;
+}
+function rejectionMessage(reason, detail) {
+  switch (reason) {
+    case "type":
+      return `${detail.name} is not an accepted file type. Use ${detail.acceptLabel}.`;
+    case "size":
+      return `${detail.name} is ${formatSize(detail.size ?? 0)}, over the ${formatSize(detail.maxFileSize ?? 0)} limit.`;
+    case "count":
+      return detail.maxFiles === 1 ? "Choose one file." : `Up to ${detail.maxFiles} files. Remove one to add another.`;
+  }
+}
+function escapeHtml(text) {
+  return text.replace(
+    /[&<>"']/g,
+    (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]
+  );
+}
+
+// src/components/FileInput/FileInput.tsx
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+var REMOVE_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+var sameFiles = (a, b) => a.length === b.length && a.every((file, i) => file === b[i]);
+function FileInput({
+  label,
+  hideLabel = false,
+  description,
+  error,
+  invalid = false,
+  required = false,
+  disabled = false,
+  name,
+  size = "md",
+  className,
+  accept,
+  acceptLabel,
+  maxFileSize,
+  multiple = false,
+  maxFiles,
+  files,
+  defaultFiles,
+  onFilesChange,
+  idleLabel,
+  browseLabel = "browse"
+}) {
+  const id = useId3();
+  const labelId = `${id}label`;
+  const descriptionId = `${id}description`;
+  const messagesId = `${id}messages`;
+  const controlled = files !== void 0;
+  const [uncontrolledFiles, setUncontrolledFiles] = useState4(defaultFiles ?? []);
+  const current = controlled ? files : uncontrolledFiles;
+  const [rejections, setRejections] = useState4([]);
+  const [inputId, setInputId] = useState4();
+  const [pondVersion, setPondVersion] = useState4(0);
+  const hostRef = useRef2(null);
+  const pondRef = useRef2(null);
+  const moduleRef = useRef2(null);
+  const patchRef = useRef2(() => {
+  });
+  const settledRef = useRef2(current);
+  const targetRef = useRef2(null);
+  const acceptList = parseAccept(accept);
+  const acceptAttr = acceptList.join(",");
+  const maxBytes = parseSize(maxFileSize);
+  const messages = [...rejections, ...error != null ? [error] : []];
+  const isInvalid = invalid || messages.length > 0;
+  const idleText = idleLabel ?? (multiple ? "Drop files here or" : current.length > 0 ? "Drop another file to replace it, or" : "Drop a file here or");
+  const live = {
+    acceptList,
+    acceptLabel: acceptLabel ?? describeAccept(acceptList),
+    maxBytes,
+    maxFiles: multiple ? maxFiles : 1,
+    multiple,
+    current,
+    controlled,
+    onFilesChange,
+    labelId,
+    describedBy: [description != null ? descriptionId : null, messages.length > 0 ? messagesId : null],
+    isInvalid,
+    acceptAttr
+  };
+  const liveRef = useRef2(live);
+  useEffect2(() => {
+    liveRef.current = live;
+  });
+  useEffect2(() => {
+    let cancelled = false;
+    let pond = null;
+    let observer = null;
+    const host = hostRef.current;
+    if (!host) return void 0;
+    const reject = (reason, file) => {
+      const l = liveRef.current;
+      const message = rejectionMessage(reason, {
+        name: file?.name,
+        size: file?.size,
+        acceptLabel: l.acceptLabel,
+        maxFileSize: l.maxBytes,
+        maxFiles: l.maxFiles
+      });
+      setRejections((list) => list.includes(message) ? list : [...list, message]);
+      if (file && targetRef.current) {
+        targetRef.current = targetRef.current.filter((f) => f !== file);
+        queueMicrotask(emit);
+      }
+    };
+    const startAttempt = () => setRejections((list) => list.length ? [] : list);
+    let removeIntent = false;
+    const acceptedIds = /* @__PURE__ */ new Set();
+    const noteRemove = (event) => {
+      if (event.target?.closest?.(".filepond--action-remove-item")) removeIntent = true;
+    };
+    const emit = () => {
+      const mod = moduleRef.current;
+      if (!pond || !mod) return;
+      const idle = pond.getFiles().filter((item) => item.status === mod.FileStatus.IDLE).map((item) => item.file);
+      const accepted = liveRef.current.multiple ? idle : idle.slice(-1);
+      const target = targetRef.current;
+      if (target) {
+        if (!sameFiles(accepted, target)) return;
+        targetRef.current = null;
+        settledRef.current = accepted;
+        if (!sameFiles(accepted, liveRef.current.current)) {
+          if (!liveRef.current.controlled) setUncontrolledFiles(accepted);
+          liveRef.current.onFilesChange?.(accepted);
+        }
+        return;
+      }
+      if (sameFiles(accepted, settledRef.current)) return;
+      settledRef.current = accepted;
+      if (!liveRef.current.controlled) setUncontrolledFiles(accepted);
+      liveRef.current.onFilesChange?.(accepted);
+    };
+    const patch = () => {
+      if (!pond) return;
+      const l = liveRef.current;
+      const root = pond.element;
+      if (!root) return;
+      const set = (el, attr, value) => {
+        if (!el || el.getAttribute(attr) === value) return;
+        if (value == null) el.removeAttribute(attr);
+        else el.setAttribute(attr, value);
+      };
+      const input = root.querySelector("input.filepond--browser");
+      const dropLabel = root.querySelector(".filepond--drop-label label");
+      set(input, "aria-labelledby", l.labelId);
+      set(input, "aria-describedby", [dropLabel?.id, ...l.describedBy].filter(Boolean).join(" ") || null);
+      set(input, "aria-invalid", l.isInvalid ? "true" : null);
+      set(input, "accept", l.acceptAttr || null);
+      set(input, "multiple", l.multiple ? "" : null);
+      set(root.querySelector(".filepond--label-action"), "tabindex", null);
+      for (const item of root.querySelectorAll(".filepond--item")) {
+        const fileName = item.querySelector(".filepond--file-info-main")?.textContent?.trim();
+        if (fileName)
+          set(item.querySelector(".filepond--action-remove-item"), "aria-label", `Remove ${fileName}`);
+      }
+      setInputId(input?.id || void 0);
+    };
+    void import("filepond").then((mod) => {
+      if (cancelled || !mod.supported()) return;
+      moduleRef.current = mod;
+      const options = {
+        credits: false,
+        allowPaste: false,
+        allowReorder: false,
+        allowProcess: false,
+        allowRevert: false,
+        instantUpload: false,
+        dropOnPage: false,
+        // Always multi: FilePond's own single mode replaces the current file *before* validating the new
+        // one, so a rejected file would discard a good one. Replacement happens in `addfile` instead.
+        allowMultiple: true,
+        allowReplace: false,
+        itemInsertLocation: "after",
+        fileSizeBase: 1e3,
+        iconRemove: REMOVE_ICON,
+        labelButtonRemoveItem: "Remove",
+        styleButtonRemoveItemPosition: "right",
+        beforeAddFile: (item) => {
+          const l = liveRef.current;
+          const file = item.file;
+          if (!matchesAccept(file, l.acceptList)) return reject("type", file), false;
+          if (l.maxBytes != null && file.size > l.maxBytes) return reject("size", file), false;
+          return true;
+        }
+      };
+      pond = mod.create(options);
+      const root = pond.element;
+      if (!root) return;
+      host.appendChild(root);
+      pondRef.current = pond;
+      patchRef.current = patch;
+      pond.on("addfile", (error2, added) => {
+        if (!error2) acceptedIds.add(added.id);
+        if (!error2 && !liveRef.current.multiple) {
+          for (const other of pond?.getFiles() ?? []) if (other.id !== added.id) pond?.removeFile(other.id);
+        }
+        emit();
+      });
+      pond.on("removefile", (_error, removed) => {
+        const active = document.activeElement;
+        const inRemovedRow = active?.closest(".filepond--item")?.id === `filepond--item-${removed.id}`;
+        if (inRemovedRow || removeIntent && (active == null || active === document.body))
+          root.querySelector("input.filepond--browser")?.focus();
+        removeIntent = false;
+        if (acceptedIds.delete(removed.id)) startAttempt();
+        emit();
+      });
+      pond.on("updatefiles", emit);
+      pond.on("warning", (warning) => {
+        if (warning?.body === "Max files") reject("count");
+      });
+      observer = new MutationObserver(patch);
+      observer.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["tabindex", "aria-labelledby", "aria-describedby", "accept", "id", "multiple"]
+      });
+      host.addEventListener("drop", startAttempt, true);
+      host.addEventListener("change", startAttempt, true);
+      host.addEventListener("click", noteRemove, true);
+      settledRef.current = [];
+      setPondVersion((v) => v + 1);
+    });
+    return () => {
+      cancelled = true;
+      host.removeEventListener("drop", startAttempt, true);
+      host.removeEventListener("change", startAttempt, true);
+      host.removeEventListener("click", noteRemove, true);
+      observer?.disconnect();
+      if (pond) {
+        pond.element?.remove();
+        pond.destroy();
+      }
+      pondRef.current = null;
+      patchRef.current = () => {
+      };
+    };
+  }, []);
+  useEffect2(() => {
+    const pond = pondRef.current;
+    if (!pond) return;
+    pond.setOptions({
+      name: name ?? "",
+      storeAsFile: name != null,
+      disabled,
+      required,
+      maxFiles: multiple ? maxFiles ?? null : null,
+      allowRemove: !disabled,
+      labelIdle: `${escapeHtml(idleText)} <span class="filepond--label-action">${escapeHtml(browseLabel)}</span>`
+    });
+    patchRef.current();
+  }, [
+    pondVersion,
+    name,
+    disabled,
+    required,
+    multiple,
+    maxFiles,
+    idleText,
+    browseLabel,
+    labelId,
+    acceptAttr,
+    isInvalid,
+    description,
+    messages.length
+  ]);
+  useEffect2(() => {
+    const pond = pondRef.current;
+    const mod = moduleRef.current;
+    if (!pond || !mod) return;
+    const items = pond.getFiles();
+    const idle = items.filter((item) => item.status === mod.FileStatus.IDLE);
+    const inPond = idle.map((item) => item.file);
+    if (sameFiles(inPond, current)) {
+      settledRef.current = current;
+      return;
+    }
+    targetRef.current = current;
+    for (const item of idle) if (!current.includes(item.file)) pond.removeFile(item.id);
+    const toAdd = current.filter((file) => !inPond.includes(file));
+    if (toAdd.length > 0) void pond.addFiles(toAdd);
+  }, [current, pondVersion]);
+  const ready = pondVersion > 0;
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      className: cx("sc-field", "sc-file-input-field", className),
+      "data-size": size,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": isInvalid ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs22(
+          "label",
+          {
+            id: labelId,
+            htmlFor: inputId,
+            className: cx("sc-field__label", hideLabel && "sc-visually-hidden"),
+            children: [
+              label,
+              required ? /* @__PURE__ */ jsx27("span", { className: "sc-field__required", "aria-hidden": "true", children: "*" }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs22(
+          "div",
+          {
+            className: "sc-file-input",
+            "data-ready": ready ? "" : void 0,
+            "data-disabled": disabled ? "" : void 0,
+            "data-invalid": isInvalid ? "" : void 0,
+            "data-multiple": multiple ? "" : void 0,
+            children: [
+              ready ? null : (
+                // Server render and first paint: the same drop zone, inert until FilePond takes over.
+                /* @__PURE__ */ jsxs22("div", { className: "sc-file-input__placeholder", "aria-hidden": "true", children: [
+                  idleText,
+                  " ",
+                  /* @__PURE__ */ jsx27("span", { className: "sc-file-input__browse", children: browseLabel })
+                ] })
+              ),
+              /* @__PURE__ */ jsx27("div", { ref: hostRef, className: "sc-file-input__pond" })
+            ]
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsx27("p", { id: descriptionId, className: "sc-field__description", children: description }) : null,
+        /* @__PURE__ */ jsx27("div", { id: messagesId, className: "sc-file-input__messages", "aria-live": "polite", children: messages.map((message, i) => /* @__PURE__ */ jsx27("p", { className: "sc-field__error", children: message }, i)) })
+      ]
+    }
+  );
+}
+
+// src/components/PriorityNav/PriorityNav.tsx
+import {
+  useEffect as useEffect3,
+  useId as useId4,
+  useLayoutEffect,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
+
+// src/components/PriorityNav/fit.ts
+var EPSILON = 0.5;
+function rowWidth(widths, gap) {
+  let total = 0;
+  for (const w of widths) total += w;
+  return widths.length > 1 ? total + gap * (widths.length - 1) : total;
+}
+function fitCount({ widths, current, available, more, gap }) {
+  const n = widths.length;
+  const hasCurrent = current >= 0 && current < n;
+  const others = hasCurrent ? n - 1 : n;
+  if (rowWidth(widths, gap) <= available + EPSILON) return others;
+  let used = more + (hasCurrent ? widths[current] + gap : 0);
+  let count = 0;
+  for (let i = 0; i < n; i++) {
+    if (i === current) continue;
+    const next = used + widths[i] + gap;
+    if (next > available + EPSILON) break;
+    used = next;
+    count++;
+  }
+  return count;
+}
+function inlineFlags(length, current, count) {
+  const flags = [];
+  let seen = 0;
+  for (let i = 0; i < length; i++) {
+    if (i === current) flags.push(true);
+    else flags.push(seen++ < count);
+  }
+  return flags;
+}
+function isOverflowing({ widths, gap, available, was, hysteresis }) {
+  const total = rowWidth(widths, gap);
+  return was ? total + Math.max(0, hysteresis) > available + EPSILON : total > available + EPSILON;
+}
+
+// src/components/PriorityNav/place.ts
+var clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+function placePanel({ anchor, panel, viewport, gutter, offset, rtl = false }) {
+  const endAligned = rtl ? anchor.left : anchor.right - panel.width;
+  const startAligned = rtl ? anchor.right - panel.width : anchor.left;
+  const fitsX = (x2) => x2 >= gutter && x2 + panel.width <= viewport.width - gutter;
+  const x = fitsX(endAligned) ? endAligned : fitsX(startAligned) ? startAligned : endAligned;
+  const left = clamp(x, gutter, Math.max(gutter, viewport.width - gutter - panel.width));
+  const below = anchor.bottom + offset;
+  const above = anchor.top - offset - panel.height;
+  const fitsBelow = below + panel.height <= viewport.height - gutter;
+  const top = fitsBelow || above < gutter ? below : above;
+  return { left, top };
+}
+
+// src/components/PriorityNav/PriorityNav.tsx
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var defaultCountLabel = (n) => n === 1 ? "1 link" : `${n} links`;
+var defaultLink = ({ children, ...props }) => /* @__PURE__ */ jsx28("a", { ...props, children });
+var keyOf = (item) => item.id ?? item.href;
+var supportsAnchor = () => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a");
+var supportsPopover = (el) => typeof el.showPopover === "function";
+function signatureOf(items) {
+  return items.map((item) => {
+    const text = typeof item.label === "string" || typeof item.label === "number" ? item.label : "";
+    return `${keyOf(item)}
${text}`;
+  }).join("");
+}
+function PriorityNav({
+  items,
+  moreLabel = "More",
+  moreCountLabel = defaultCountLabel,
+  renderLink = defaultLink,
+  onOverflowChange,
+  overflowHysteresis = 0,
+  className,
+  style,
+  ...rest
+}) {
+  const signature = signatureOf(items);
+  const current = items.findIndex((item) => item.current);
+  const [fit, setFit] = useState5({ signature: null, current: -1, count: 0, overflowing: false });
+  const [open, setOpen] = useState5(false);
+  const panelId = useId4();
+  const listRef = useRef3(null);
+  const moreRef = useRef3(null);
+  const toggleRef = useRef3(null);
+  const panelRef = useRef3(null);
+  const measured = useRef3(null);
+  const currentRef = useRef3(current);
+  const fitRef = useRef3(fit);
+  const hysteresisRef = useRef3(overflowHysteresis);
+  const onOverflowRef = useRef3(onOverflowChange);
+  const solve = (m, cur, was) => ({
+    count: fitCount({ ...m, current: cur }),
+    overflowing: isOverflowing({ ...m, was, hysteresis: hysteresisRef.current })
+  });
+  const measuring = fit.signature !== signature;
+  useLayoutEffect(() => {
+    currentRef.current = current;
+    fitRef.current = fit;
+    hysteresisRef.current = overflowHysteresis;
+    onOverflowRef.current = onOverflowChange;
+  });
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const more = moreRef.current;
+    if (!list || !more) return;
+    if (measuring) {
+      const widths = Array.from(
+        list.querySelectorAll(":scope > .sc-priority-nav__item"),
+        (el) => el.getBoundingClientRect().width
+      );
+      measured.current = {
+        widths,
+        more: more.getBoundingClientRect().width,
+        gap: parseFloat(getComputedStyle(list).columnGap) || 0,
+        available: list.clientWidth
+      };
+    } else if (fit.current === current) return;
+    const m = measured.current;
+    if (!m) return;
+    setFit({ signature, current, ...solve(m, current, fit.overflowing) });
+  }, [measuring, signature, current, fit]);
+  useEffect3(() => {
+    const list = listRef.current;
+    const more = moreRef.current;
+    if (!list || !more || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const m = measured.current;
+      if (!m) return;
+      for (const entry of entries) {
+        if (entry.target === list)
+          m.available = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        else {
+          const width = entry.borderBoxSize?.[0]?.inlineSize ?? 0;
+          if (width > 0) m.more = width;
+        }
+      }
+      const prev = fitRef.current;
+      if (prev.signature === null) return;
+      const next = solve(m, currentRef.current, prev.overflowing);
+      if (prev.count !== next.count || prev.overflowing !== next.overflowing) setFit({ ...prev, ...next });
+    });
+    observer.observe(list);
+    observer.observe(more);
+    return () => observer.disconnect();
+  }, []);
+  const reported = useRef3(false);
+  useEffect3(() => {
+    if (reported.current === fit.overflowing) return;
+    reported.current = fit.overflowing;
+    onOverflowRef.current?.(fit.overflowing);
+  }, [fit.overflowing]);
+  useEffect3(() => {
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    if (!fonts || fonts.status === "loaded") return;
+    let live = true;
+    void fonts.ready.then(() => {
+      if (live) setFit((prev) => ({ ...prev, signature: null }));
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+  const flags = measuring ? null : inlineFlags(items.length, current, fit.count);
+  const overflow = flags ? items.filter((_, i) => !flags[i]) : [];
+  const expanded = open && overflow.length > 0;
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!panel || !supportsPopover(panel)) return;
+    if (!panel.hasAttribute("popover")) panel.setAttribute("popover", "manual");
+    const shown = panel.matches(":popover-open");
+    if (expanded && !shown) panel.showPopover();
+    else if (!expanded && shown) panel.hidePopover();
+  }, [expanded]);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    const toggle = toggleRef.current;
+    if (!expanded || !panel || !toggle || supportsAnchor()) return;
+    const place = () => {
+      const anchor = toggle.getBoundingClientRect();
+      const box = panel.getBoundingClientRect();
+      const css = getComputedStyle(panel);
+      const { left, top } = placePanel({
+        anchor,
+        panel: { width: box.width, height: box.height },
+        viewport: { width: document.documentElement.clientWidth, height: window.innerHeight },
+        gutter: parseFloat(css.getPropertyValue("--sc-spacing-md")) || 16,
+        offset: parseFloat(css.getPropertyValue("--sc-spacing-2xs")) || 4,
+        rtl: css.direction === "rtl"
+      });
+      panel.style.left = `${left}px`;
+      panel.style.top = `${top}px`;
+    };
+    place();
+    window.addEventListener("resize", place, { passive: true });
+    window.addEventListener("scroll", place, { passive: true, capture: true });
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, { capture: true });
+      panel.style.left = "";
+      panel.style.top = "";
+    };
+  }, [expanded]);
+  useEffect3(() => {
+    if (!expanded) return;
+    const onPointerDown = (event) => {
+      if (!moreRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      const active = document.activeElement;
+      setOpen(false);
+      if (!active || active === document.body || moreRef.current?.contains(active))
+        toggleRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [expanded]);
+  const onBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  };
+  const link = (item, inPanel) => renderLink(
+    {
+      href: item.href,
+      className: "sc-priority-nav__link",
+      "aria-current": item.current ? "page" : void 0,
+      onClick: inPanel ? () => setOpen(false) : void 0,
+      children: /* @__PURE__ */ jsx28("span", { className: "sc-priority-nav__label", children: item.label })
+    },
+    item
+  );
+  return /* @__PURE__ */ jsx28(
+    "nav",
+    {
+      className: cx("sc-priority-nav", className),
+      "data-measuring": measuring || void 0,
+      "data-overflowing": fit.overflowing || void 0,
+      style: { ...style, "--_anchor": `--sc-priority-nav${panelId.replace(/[^\w-]/g, "")}` },
+      ...rest,
+      children: /* @__PURE__ */ jsxs23("ul", { ref: listRef, className: "sc-priority-nav__list", children: [
+        items.map(
+          (item, i) => flags && !flags[i] ? null : /* @__PURE__ */ jsx28("li", { className: "sc-priority-nav__item", "data-current": item.current || void 0, children: link(item, false) }, keyOf(item))
+        ),
+        /* @__PURE__ */ jsxs23(
+          "li",
+          {
+            ref: moreRef,
+            className: "sc-priority-nav__more",
+            hidden: measuring || overflow.length === 0,
+            onBlur,
+            children: [
+              /* @__PURE__ */ jsxs23(
+                "button",
+                {
+                  ref: toggleRef,
+                  type: "button",
+                  className: "sc-priority-nav__toggle",
+                  "aria-expanded": expanded,
+                  "aria-controls": panelId,
+                  onClick: () => setOpen((o) => !o),
+                  children: [
+                    /* @__PURE__ */ jsx28(MoreHorizontalIcon, { className: "sc-priority-nav__ellipsis" }),
+                    /* @__PURE__ */ jsx28("span", { className: "sc-priority-nav__toggle-label", children: moreLabel }),
+                    /* @__PURE__ */ jsxs23("span", { className: "sc-visually-hidden", children: [
+                      ", ",
+                      moreCountLabel(overflow.length)
+                    ] }),
+                    /* @__PURE__ */ jsx28(ChevronDownIcon, { size: "sm", className: "sc-priority-nav__chevron" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx28("ul", { ref: panelRef, id: panelId, className: "sc-priority-nav__panel", hidden: !expanded, children: overflow.map((item) => /* @__PURE__ */ jsx28("li", { children: link(item, true) }, keyOf(item))) })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/Popover/Popover.tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+function Root6({ open, defaultOpen, onOpenChange, modal = false, children }) {
+  return /* @__PURE__ */ jsx29(
+    BasePopover.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      modal,
+      children
+    }
+  );
+}
+function Trigger3({ render, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx29(
+    BasePopover.Trigger,
+    {
+      render: render ?? /* @__PURE__ */ jsx29(Button, { variant: "secondary", className }),
+      className: render ? className : void 0,
+      ...rest,
+      children
+    }
+  );
+}
+function Content3({
+  side = "bottom",
+  align = "center",
+  sideOffset,
+  arrow = false,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx29(BasePopover.Portal, { children: /* @__PURE__ */ jsx29(
+    BasePopover.Positioner,
+    {
+      side,
+      align,
+      sideOffset: sideOffset ?? (arrow ? 8 : 4),
+      className: "sc-popover__positioner",
+      children: /* @__PURE__ */ jsxs24(BasePopover.Popup, { className: cx("sc-popover", className), ...rest, children: [
+        arrow ? /* @__PURE__ */ jsx29(BasePopover.Arrow, { className: "sc-popover__arrow" }) : null,
+        children
+      ] })
+    }
+  ) });
+}
+function Title2({ className, ...rest }) {
+  return /* @__PURE__ */ jsx29(BasePopover.Title, { className: cx("sc-popover__title", className), ...rest });
+}
+function Description2({ className, ...rest }) {
+  return /* @__PURE__ */ jsx29(BasePopover.Description, { className: cx("sc-popover__description", className), ...rest });
+}
+function Close2({ className, children, render, ...rest }) {
+  if (children === void 0 && render === void 0) {
+    return /* @__PURE__ */ jsx29(BasePopover.Close, { className: cx("sc-popover__close", className), "aria-label": "Close", ...rest, children: /* @__PURE__ */ jsx29(XIcon, {}) });
+  }
+  return /* @__PURE__ */ jsx29(BasePopover.Close, { className, render, ...rest, children });
+}
+var Popover = { Root: Root6, Trigger: Trigger3, Content: Content3, Title: Title2, Description: Description2, Close: Close2 };
+
+// src/components/BroomIcon/BroomIcon.tsx
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+function BroomIcon({ sweeping = false, size = "lg", title, className, ...rest }) {
+  return /* @__PURE__ */ jsxs25(
+    "svg",
+    {
+      className: cx("sc-icon", "sc-broom", className),
+      "data-size": size,
+      "data-sweeping": sweeping || void 0,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      focusable: "false",
+      "aria-hidden": title ? void 0 : true,
+      role: title ? "img" : void 0,
+      "aria-label": title,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs25(
+          "g",
+          {
+            className: "sc-broom__body",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx30("path", { d: "M16.1 10.48 L19.36 1.86 A0.87 0.87 0 0 1 20.98 2.47 L17.84 10.78" }),
+              /* @__PURE__ */ jsx30("path", { d: "M13.33 12 C14.23 10.67 16.73 9.87 18.17 11 C19.07 12.67 18.93 18.33 18.4 21.4 C16.07 22.4 11.07 22.07 6.4 18.07 C9.07 16.67 11.8 15 13.33 12 Z" }),
+              /* @__PURE__ */ jsx30("path", { className: "sc-broom__band", d: "M13.47 12.13 L18.4 13.5 L18.33 14.1 L13.27 12.77 Z" }),
+              /* @__PURE__ */ jsx30("path", { d: "M12.87 13.73 L14.4 14.47 M16.2 15.27 L18.47 15.87" }),
+              /* @__PURE__ */ jsx30("path", { d: "M12.8 16.87 C11.86 18.24 10.75 19.38 9.57 20.23 M15.6 17.4 C15.22 18.96 14.6 20.44 13.77 21.71" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs25("g", { className: "sc-broom__dust", fill: "none", stroke: "currentColor", children: [
+          /* @__PURE__ */ jsx30("circle", { cx: "4.77", cy: "13.53", r: "0.5" }),
+          /* @__PURE__ */ jsx30("circle", { cx: "2.7", cy: "15.53", r: "0.87" }),
+          /* @__PURE__ */ jsx30("circle", { cx: "4.1", cy: "18.27", r: "0.5" })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/index.ts
 var version = "0.1.1";
 export {
@@ -1746,6 +2545,7 @@ export {
   Banner,
   BellIcon,
   BriefcaseIcon,
+  BroomIcon,
   Button,
   CalendarIcon,
   Card,
@@ -1768,6 +2568,7 @@ export {
   EmptyState,
   ExternalLinkIcon,
   EyeIcon,
+  FileInput,
   FilterIcon,
   FlagIcon,
   Heading,
@@ -1790,6 +2591,8 @@ export {
   PauseIcon,
   PlayIcon,
   PlusIcon,
+  Popover,
+  PriorityNav,
   Progress,
   RefreshIcon,
   SearchIcon,