@salemcobalt/ui 0.2.0-rc.13 → 0.2.0-rc.15

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
   });
@@ -3157,7 +3151,6 @@ import {
   useCallback as useCallback2,
   useContext as useContext2,
   useEffect as useEffect6,
-  useEffectEvent,
   useId as useId5,
   useMemo as useMemo3,
   useRef as useRef6,
@@ -3439,12 +3432,14 @@ function Step({
   const phase = useContext2(FrameContext);
   const { announce } = useContext2(FlowContext);
   const message = announcement ?? (typeof title === "string" ? title : void 0);
-  const arrive = useEffectEvent(() => {
-    titleRef.current?.focus({ preventScroll: true });
-    if (message) announce(message);
+  const latest = useRef6({ message, announce });
+  useEffect6(() => {
+    latest.current = { message, announce };
   });
   useEffect6(() => {
-    if (phase === "enter") arrive();
+    if (phase !== "enter") return;
+    titleRef.current?.focus({ preventScroll: true });
+    if (latest.current.message) latest.current.announce(latest.current.message);
   }, [phase]);
   return /* @__PURE__ */ jsxs29("section", { className: cx("sc-flow__step", className), "aria-labelledby": id, ...rest, children: [
     /* @__PURE__ */ jsxs29("div", { className: "sc-flow__step-head", children: [
@@ -3475,6 +3470,125 @@ 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 fraction = 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": tone,
+      "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 ?? `${label} ${value} out of ${max}` }),
+        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: value }),
+          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 Fragment9 } from "react";
+import { Fragment as Fragment10, 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(Fragment10, { children: text });
+  const Tag = kind === "added" ? "ins" : "del";
+  return /* @__PURE__ */ jsxs31(Fragment10, { 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(Fragment9, { 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 {
@@ -3538,7 +3652,10 @@ export {
   Popover,
   PriorityNav,
   Progress,
+  Quote,
+  ReasonList,
   RefreshIcon,
+  Score,
   SearchIcon,
   Select,
   SelectionBar,
@@ -3563,6 +3680,7 @@ export {
   UndoIcon,
   UserIcon,
   WarningIcon,
+  WordDiff,
   XIcon,
   iconNames,
   useRowSelection,