@salemcobalt/ui 0.2.0-rc.14 → 0.2.0-rc.16

package/dist/index.js

@@ -1342,19 +1342,11 @@ var sizeByLevel = {
   5: "md",
   6: "sm"
 };
-function Heading({
-  level = 2,
-  size,
-  as,
-  tone = "default",
-  truncate = false,
-  className,
-  ...rest
-}) {
+function Heading({ level = 2, size, as, tone, truncate = false, className, ...rest }) {
   return createElement3(as ?? `h${level}`, {
     className: cx("sc-heading", className),
     "data-size": size ?? sizeByLevel[level],
-    "data-tone": tone,
+    "data-tone": tone ?? (size === "overline" ? "muted" : "default"),
     "data-truncate": truncate || void 0,
     ...rest
   });
@@ -1370,6 +1362,7 @@ function Text({
   align,
   truncate = false,
   numeric = false,
+  family = "sans",
   className,
   style,
   ...rest
@@ -1383,6 +1376,7 @@ function Text({
     "data-align": align,
     "data-truncate": truncate === true ? "" : clamp2 !== void 0 ? "clamp" : void 0,
     "data-numeric": numeric || void 0,
+    "data-family": family === "mono" ? "mono" : void 0,
     style: clamp2 !== void 0 ? { ...style, "--sc-text-lines": clamp2 } : style,
     ...rest
   });
@@ -2813,16 +2807,25 @@ function placePanel({ anchor, panel, viewport, gutter, offset, rtl = false }) {
 }
 
 // src/components/PriorityNav/PriorityNav.tsx
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var defaultCountLabel2 = (n) => n === 1 ? "1 link" : `${n} links`;
 var defaultLink = ({ children, ...props }) => /* @__PURE__ */ jsx31("a", { ...props, children });
 var keyOf = (item) => item.id ?? item.href;
+var badgeOf = (item) => item.badge === "dot" ? "dot" : typeof item.badge === "number" && item.badge > 0 && Number.isFinite(item.badge) ? item.badge : null;
+var badgeTextOf = (item) => {
+  const badge = badgeOf(item);
+  if (badge === null) return null;
+  return item.badgeLabel ?? (badge === "dot" ? null : String(badge));
+};
+function Badge2({ value }) {
+  return /* @__PURE__ */ jsx31("span", { className: "sc-priority-nav__badge", "data-kind": value === "dot" ? "dot" : "count", "aria-hidden": "true", children: value === "dot" ? null : value });
+}
 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}`;
+    return `${keyOf(item)}
${text}
${badgeOf(item) ?? ""}`;
   }).join("");
 }
 function PriorityNav({
@@ -2925,6 +2928,10 @@ function PriorityNav({
   const flags = measuring ? null : inlineFlags(items.length, current, fit.count);
   const overflow = flags ? items.filter((_, i) => !flags[i]) : [];
   const expanded = open && overflow.length > 0;
+  const overflowBadges = overflow.map(badgeOf).filter((b) => b !== null);
+  const overflowCount = overflowBadges.reduce((sum, b) => sum + (b === "dot" ? 0 : b), 0);
+  const moreBadge = overflowCount > 0 ? overflowCount : overflowBadges.length > 0 ? "dot" : null;
+  const moreBadgeText = overflow.map(badgeTextOf).filter((text) => text !== null).map((text) => `, ${text}`).join("");
   useLayoutEffect2(() => {
     const panel = panelRef.current;
     if (!panel || !supportsPopover(panel)) return;
@@ -2984,16 +2991,27 @@ function PriorityNav({
   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__ */ jsx31("span", { className: "sc-priority-nav__label", children: item.label })
-    },
-    item
-  );
+  const link = (item, inPanel) => {
+    const badge = badgeOf(item);
+    const badgeText = badgeTextOf(item);
+    return renderLink(
+      {
+        href: item.href,
+        className: "sc-priority-nav__link",
+        "aria-current": item.current ? "page" : void 0,
+        onClick: inPanel ? () => setOpen(false) : void 0,
+        children: /* @__PURE__ */ jsxs26(Fragment9, { children: [
+          /* @__PURE__ */ jsx31("span", { className: "sc-priority-nav__label", children: item.label }),
+          badge !== null ? /* @__PURE__ */ jsx31(Badge2, { value: badge }) : null,
+          badgeText !== null ? /* @__PURE__ */ jsxs26("span", { className: "sc-visually-hidden", children: [
+            ", ",
+            badgeText
+          ] }) : null
+        ] })
+      },
+      item
+    );
+  };
   return /* @__PURE__ */ jsx31(
     "nav",
     {
@@ -3028,8 +3046,10 @@ function PriorityNav({
                     /* @__PURE__ */ jsx31("span", { className: "sc-priority-nav__toggle-label", children: moreLabel }),
                     /* @__PURE__ */ jsxs26("span", { className: "sc-visually-hidden", children: [
                       ", ",
-                      moreCountLabel(overflow.length)
+                      moreCountLabel(overflow.length),
+                      moreBadgeText
                     ] }),
+                    moreBadge !== null ? /* @__PURE__ */ jsx31(Badge2, { value: moreBadge }) : null,
                     /* @__PURE__ */ jsx31(ChevronDownIcon, { size: "sm", className: "sc-priority-nav__chevron" })
                   ]
                 }
@@ -3476,6 +3496,127 @@ var FullScreenFlow = {
   Footer
 };
 
+// src/components/Score/Score.tsx
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+function Score({
+  value,
+  max = 100,
+  tone = "accent",
+  variant = "tile",
+  size = "sm",
+  caption,
+  label = "Score",
+  valueText,
+  selected = false,
+  className,
+  style,
+  ...rest
+}) {
+  const scored = value !== null;
+  const fraction = scored && max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+  return /* @__PURE__ */ jsxs30(
+    "span",
+    {
+      className: cx("sc-score", className),
+      "data-variant": variant,
+      "data-size": variant === "tile" ? size : void 0,
+      "data-tone": scored ? tone : void 0,
+      "data-unscored": scored ? void 0 : true,
+      "data-selected": selected || void 0,
+      style: variant === "ring" ? { ...style, "--sc-score-fill": (fraction * 100).toFixed(2) } : style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx35("span", { className: "sc-visually-hidden", children: valueText ?? (scored ? `${label} ${value} out of ${max}` : `${label}: not scored`) }),
+        variant === "ring" ? /* @__PURE__ */ jsxs30("svg", { className: "sc-score__ring", viewBox: "0 0 64 64", "aria-hidden": "true", focusable: "false", children: [
+          /* @__PURE__ */ jsx35("circle", { className: "sc-score__track", cx: "32", cy: "32", r: "29", pathLength: 100 }),
+          fraction > 0 ? /* @__PURE__ */ jsx35("circle", { className: "sc-score__arc", cx: "32", cy: "32", r: "29", pathLength: 100 }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs30("span", { className: "sc-score__body", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx35("span", { className: "sc-score__value", children: scored ? value : "\u2013" }),
+          caption != null ? /* @__PURE__ */ jsx35("span", { className: "sc-score__caption", children: caption }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ReasonList/ReasonList.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+function ReasonListRoot({ tone, size = "md", divider = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx36(
+    "ul",
+    {
+      className: cx("sc-reason-list", className),
+      "data-tone": tone,
+      "data-size": size,
+      "data-divider": divider || void 0,
+      ...rest
+    }
+  );
+}
+function ReasonListItem({ className, ...rest }) {
+  return /* @__PURE__ */ jsx36("li", { className: cx("sc-reason-list__item", className), ...rest });
+}
+var ReasonList = Object.assign(ReasonListRoot, { Item: ReasonListItem });
+
+// src/components/WordDiff/WordDiff.tsx
+import { createElement as createElement7, Fragment as Fragment10 } from "react";
+import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
+var edges = /^(\s*)([\s\S]*?)(\s*)$/;
+function Change({ kind, text, label }) {
+  const [, lead = "", core = "", trail = ""] = edges.exec(text) ?? [];
+  if (!core) return /* @__PURE__ */ jsx37(Fragment11, { children: text });
+  const Tag = kind === "added" ? "ins" : "del";
+  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+    lead,
+    /* @__PURE__ */ jsxs31(Tag, { className: `sc-word-diff__${kind}`, children: [
+      /* @__PURE__ */ jsxs31("span", { className: "sc-visually-hidden", children: [
+        "[",
+        label,
+        ": "
+      ] }),
+      core,
+      /* @__PURE__ */ jsx37("span", { className: "sc-visually-hidden", children: "]" })
+    ] }),
+    trail
+  ] });
+}
+function WordDiff({
+  parts,
+  as = "p",
+  size = "sm",
+  addedLabel = "added",
+  removedLabel = "removed",
+  className,
+  ...rest
+}) {
+  const children = parts.map(
+    (part, i) => part.kind === "same" ? /* @__PURE__ */ jsx37(Fragment10, { children: part.text }, i) : /* @__PURE__ */ jsx37(
+      Change,
+      {
+        kind: part.kind,
+        text: part.text,
+        label: part.kind === "added" ? addedLabel : removedLabel
+      },
+      i
+    )
+  );
+  return createElement7(
+    as,
+    { className: cx("sc-word-diff", className), "data-size": size, ...rest },
+    children
+  );
+}
+
+// src/components/Quote/Quote.tsx
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+function Quote({ label, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs32("figure", { className: cx("sc-quote", className), ...rest, children: [
+    /* @__PURE__ */ jsx38("figcaption", { className: "sc-quote__label", children: label }),
+    /* @__PURE__ */ jsx38("blockquote", { className: "sc-quote__text", children })
+  ] });
+}
+
 // src/index.ts
 var version = "0.1.1";
 export {
@@ -3539,7 +3680,10 @@ export {
   Popover,
   PriorityNav,
   Progress,
+  Quote,
+  ReasonList,
   RefreshIcon,
+  Score,
   SearchIcon,
   Select,
   SelectionBar,
@@ -3564,6 +3708,7 @@ export {
   UndoIcon,
   UserIcon,
   WarningIcon,
+  WordDiff,
   XIcon,
   iconNames,
   useRowSelection,