@salemcobalt/ui 0.2.0-rc.8 → 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
   });
 }
@@ -2119,6 +2134,405 @@ function FileInput({
   );
 }
 
+// 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 {
@@ -2131,6 +2545,7 @@ export {
   Banner,
   BellIcon,
   BriefcaseIcon,
+  BroomIcon,
   Button,
   CalendarIcon,
   Card,
@@ -2176,6 +2591,8 @@ export {
   PauseIcon,
   PlayIcon,
   PlusIcon,
+  Popover,
+  PriorityNav,
   Progress,
   RefreshIcon,
   SearchIcon,