@orangecheck/app-design 1.7.0 → 1.8.0

package/dist/components.mjs

@@ -4,7 +4,7 @@ import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { X, ChevronDown, Check, Search, Copy, Lock, Info, ArrowUpRight, ArrowRight, ChevronRight, CornerDownLeft, Download, FileText, Upload, ArrowLeft, Maximize2, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck } from 'lucide-react';
+import { X, ChevronDown, Check, Search, Copy, Lock, Info, ArrowUpRight, ArrowRight, ChevronRight, UserRound, CornerDownLeft, Download, FileText, Upload, ArrowLeft, Maximize2, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import 'next-themes';
@@ -535,7 +535,7 @@ var JS_TAG = /<\/?(?=[A-Za-z])/y;
 var JS_TAG_NAME = /[A-Za-z][\w$.:-]*/y;
 var JS_PUNCT = /=>|\.\.\.|[{}()[\];,.<>=+\-*/%!?:&|^~#]/y;
 var JSX_BEFORE = /* @__PURE__ */ new Set(["(", ",", "=", "?", ":", "{", "[", ";", ">", "&&", "||", "=>", "return"]);
-function scanJs(src, emit, jsx39) {
+function scanJs(src, emit, jsx40) {
   let i = 0;
   let prev = "";
   let tagDepth = 0;
@@ -561,7 +561,7 @@ function scanJs(src, emit, jsx39) {
       sig('"');
       continue;
     }
-    if (jsx39 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
+    if (jsx40 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
       const name = at(JS_TAG_NAME, src, i + m.length);
       if (name) {
         emit(m);
@@ -573,7 +573,7 @@ function scanJs(src, emit, jsx39) {
         continue;
       }
     }
-    if (jsx39 && tagDepth > 0 && braceInTag === 0) {
+    if (jsx40 && tagDepth > 0 && braceInTag === 0) {
       if (src.startsWith("/>", i) || src[i] === ">") {
         const close = src[i] === ">" ? ">" : "/>";
         emit(close);
@@ -593,7 +593,7 @@ function scanJs(src, emit, jsx39) {
         continue;
       }
       if (src[i] === "{") braceInTag = 1;
-    } else if (jsx39 && tagDepth > 0 && braceInTag > 0) {
+    } else if (jsx40 && tagDepth > 0 && braceInTag > 0) {
       if (src[i] === "{") braceInTag++;
       else if (src[i] === "}") braceInTag--;
     }
@@ -1478,6 +1478,7 @@ function Notice({
   title,
   children,
   action,
+  icon,
   role,
   className
 }) {
@@ -1494,7 +1495,17 @@ function Notice({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-3", children: [
-          kind !== "neutral" ? /* @__PURE__ */ jsx(
+          icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "mt-0.5 shrink-0 [&_svg]:size-[1.125rem]",
+                kind === "brand" ? "text-oca-accent-ink" : kind === "danger" ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: icon
+            }
+          ) : kind !== "neutral" ? /* @__PURE__ */ jsx(
             "span",
             {
               "aria-hidden": true,
@@ -2770,7 +2781,8 @@ forwardRef(function DropdownMenuItem2({ className, destructive, ...props }, ref)
     {
       ref,
       className: cn(
-        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none",
+        // A thumb's 44px on a phone.
+        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none max-md:h-11",
         "data-[highlighted]:bg-accent data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:text-muted-foreground",
         destructive && "text-destructive [&_svg]:text-destructive",
         className
@@ -4429,6 +4441,66 @@ function ListCard({
 }) {
   return /* @__PURE__ */ jsx(Tag, { className: cn("divide-y divide-border overflow-clip rounded-[1.25rem] border border-border bg-card", className), ...props });
 }
+var ROW_LOOK = {
+  // In a ListCard: full width, the card's hairlines between rows.
+  card: { box: "px-5", hover: "hover:bg-accent/60", current: "bg-accent" },
+  // In a pane's list (threads, contacts): rounded, lifted when current.
+  pane: { box: "rounded-xl px-3", hover: "hover:bg-accent", current: "bg-card shadow-sm ring-1 ring-border" }
+};
+function ListRow({
+  title,
+  meta,
+  description,
+  leading,
+  trailing,
+  actions,
+  revealActions = "always",
+  href,
+  onSelect,
+  current = false,
+  unread = false,
+  variant = "card",
+  as: Tag = "li",
+  className
+}) {
+  const tight = useDensity() === "compact";
+  const look = ROW_LOOK[variant];
+  const interactive = href !== void 0 || onSelect !== void 0;
+  const cls = cn(
+    "flex min-h-11 w-full min-w-0 items-center gap-3 text-left outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+    look.box,
+    variant === "pane" ? "py-2" : tight ? "py-3" : "py-4",
+    interactive && !current && look.hover,
+    current && look.current,
+    actions && "pr-14"
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0", children: leading }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: cn("truncate text-[0.9375rem] text-foreground", unread ? "font-semibold" : "font-medium"), children: title }),
+        meta ? /* @__PURE__ */ jsx("span", { className: "oca-tabular shrink-0 text-[0.8125rem] text-muted-foreground", children: meta }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsx("span", { className: cn("truncate text-[0.875rem]", unread ? "text-foreground" : "text-muted-foreground"), children: description }) : null
+    ] }),
+    trailing ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-2", children: trailing }) : null
+  ] });
+  const aria = current ? { "aria-current": "true" } : {};
+  return /* @__PURE__ */ jsxs(Tag, { className: cn("group/row relative", className), children: [
+    href !== void 0 ? href.startsWith("/") ? /* @__PURE__ */ jsx(Link, { href, className: cls, ...aria, children: body }) : /* @__PURE__ */ jsx("a", { href, className: cls, ...aria, children: body }) : onSelect ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onSelect, className: cls, ...aria, children: body }) : /* @__PURE__ */ jsx("div", { className: cls, children: body }),
+    actions ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute right-2 top-1/2 flex -translate-y-1/2 items-center",
+          revealActions === "hover" && "transition-opacity md:opacity-0 md:focus-within:opacity-100 md:group-hover/row:opacity-100 md:has-[[data-state=open]]:opacity-100"
+        ),
+        children: actions
+      }
+    ) : null
+  ] });
+}
 var ChoiceSize = createContext("md");
 var COLUMNS = { 1: "", 2: "sm:grid-cols-2", 3: "sm:grid-cols-2 lg:grid-cols-3" };
 function ChoiceGroup({
@@ -4495,6 +4567,54 @@ function ChoiceCard({
     }
   );
 }
+var SIZES2 = {
+  "2xs": "size-7 text-[0.6875rem] [&_svg]:size-3.5",
+  xs: "size-8 text-[0.75rem] [&_svg]:size-4",
+  sm: "size-9 text-[0.8125rem] [&_svg]:size-4",
+  md: "size-11 text-[0.9375rem] [&_svg]:size-5",
+  lg: "size-14 text-[1.1875rem] [&_svg]:size-6"
+};
+function personInitials(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((w) => w.match(/[\p{L}\p{N}]/u)?.[0] ?? "").join("").toLocaleUpperCase();
+}
+function avatarHue(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0) % 360;
+}
+function Avatar({
+  seed,
+  name,
+  src,
+  size = "sm",
+  className
+}) {
+  const [failed, setFailed] = useState(null);
+  const box = cn("inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full", SIZES2[size], className);
+  if (src && failed !== src) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx("img", { src, alt: "", "aria-hidden": true, className: cn(box, "object-cover"), onError: () => setFailed(src) })
+    );
+  }
+  const initials = name ? personInitials(name) : "";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(box, "font-medium leading-none"),
+      style: {
+        "--oca-avatar-h": avatarHue(seed),
+        backgroundColor: "hsl(var(--oca-avatar-h) 60% var(--oca-avatar-bg-l))",
+        color: "hsl(var(--oca-avatar-h) 45% var(--oca-avatar-fg-l))"
+      },
+      children: initials || /* @__PURE__ */ jsx(UserRound, {})
+    }
+  );
+}
 function useMacKeys() {
   const [mac, setMac] = useState(true);
   useEffect(() => {
@@ -5338,6 +5458,6 @@ function ToolGrid({
   );
 }
 
-export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, ChartFrame, ChoiceCard, ChoiceGroup, Closing, CodeBlock, CodeTabs, CommandDialog, ComparisonTable, Container, CopyButton, CountdownRing, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, HudCard, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, ListCard, LoadingBlock, LockedPreview, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, Panel, PhoneFrame, PlanCard, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SectionTitle, SignMessage, SourceNote, Sparkline, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, chartColor, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
+export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, Avatar, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, ChartFrame, ChoiceCard, ChoiceGroup, Closing, CodeBlock, CodeTabs, CommandDialog, ComparisonTable, Container, CopyButton, CountdownRing, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, HudCard, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, ListCard, ListRow, LoadingBlock, LockedPreview, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, Panel, PhoneFrame, PlanCard, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SectionTitle, SignMessage, SourceNote, Sparkline, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, chartColor, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map