@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/historical-figure-card/historical-figure-card.js

@@ -0,0 +1,270 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useState
+} from "react";
+import { ChevronDown, User } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar";
+import { Badge } from "../badge/badge";
+const FALLBACK_LIFESPAN_MIN_YEAR = 1500;
+const FALLBACK_LIFESPAN_SPAN_YEARS = 100;
+const DEFAULT_LABELS = {
+  collapseBio: "Hide biography",
+  connections: "Connections",
+  expandBio: "Read biography",
+  fields: "Fields",
+  lifespan: "Lifespan",
+  works: "Notable works"
+};
+function formatYear(year) {
+  if (year === void 0) return void 0;
+  if (year < 0) return `${Math.abs(year).toString()} BC`;
+  return year.toString();
+}
+function getInitials(name) {
+  if (typeof name !== "string") return "";
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((part) => part.charAt(0).toUpperCase()).join("").slice(0, 2);
+}
+function LifespanBar({
+  birthYear,
+  deathYear,
+  label
+}) {
+  if (birthYear === void 0 || deathYear === void 0) return null;
+  if (deathYear <= birthYear) return null;
+  const span = deathYear - birthYear;
+  const min = Math.min(birthYear, FALLBACK_LIFESPAN_MIN_YEAR);
+  const range = Math.max(deathYear, min + FALLBACK_LIFESPAN_SPAN_YEARS) - min || 1;
+  const start = (birthYear - min) / range * 100;
+  const width = span / range * 100;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": `${label}: ${formatYear(birthYear) ?? ""} \u2013 ${formatYear(deathYear) ?? ""}`,
+      className: "relative mt-2 h-1.5 w-full rounded-full bg-muted",
+      role: "img",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute h-full rounded-full bg-primary",
+          style: { left: `${start.toString()}%`, width: `${width.toString()}%` }
+        }
+      )
+    }
+  );
+}
+function LifeEventLine({ caption, event }) {
+  if (!event) return null;
+  const year = formatYear(event.year);
+  if (year === void 0 && !event.place) return null;
+  return /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: caption }),
+    " ",
+    year ?? "Unknown",
+    event.place ? /* @__PURE__ */ jsxs("span", { children: [
+      " \xB7 ",
+      event.place
+    ] }) : null
+  ] });
+}
+function FigureChips({ heading, items }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: heading }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item, index) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item }, `chip-${index.toString()}`)) })
+  ] });
+}
+function FigureWorksList({ heading, items }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: heading }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm text-foreground", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { className: "leading-tight", children: item }, `work-${index.toString()}`)) })
+  ] });
+}
+function FigureConnections({
+  heading,
+  items
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: heading }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5 text-sm", children: items.map((connection, index) => {
+      const labelNode = connection.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "font-medium text-foreground underline-offset-4 hover:underline",
+          href: connection.href,
+          children: connection.name
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: connection.name });
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-baseline justify-between gap-3",
+          children: [
+            labelNode,
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: connection.relation })
+          ]
+        },
+        `connection-${index.toString()}`
+      );
+    }) })
+  ] });
+}
+function FigureQuote({ quote }) {
+  return /* @__PURE__ */ jsxs("blockquote", { className: "border-l-2 border-primary/40 pl-3 text-sm italic text-muted-foreground", children: [
+    "\u201C",
+    quote.text,
+    "\u201D",
+    quote.source ? /* @__PURE__ */ jsx("footer", { className: "mt-1 text-xs not-italic text-muted-foreground/80", children: quote.source }) : null
+  ] });
+}
+function FigureBio({
+  biography,
+  collapseLabel,
+  expandLabel
+}) {
+  const [open, setOpen] = useState(false);
+  const handleToggle = useCallback(() => {
+    setOpen((value) => !value);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "aria-expanded": open,
+        className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        onClick: handleToggle,
+        type: "button",
+        children: [
+          open ? collapseLabel : expandLabel,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-4 transition-transform",
+                open ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-foreground", children: biography }) : null
+  ] });
+}
+function FigureHeader({
+  era,
+  name,
+  portrait,
+  title
+}) {
+  const initials = getInitials(name);
+  const altName = typeof name === "string" ? name : void 0;
+  return /* @__PURE__ */ jsxs("header", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsxs(Avatar, { className: "size-14 shrink-0 ring-2 ring-border", children: [
+      portrait ? /* @__PURE__ */ jsx(AvatarImage, { alt: altName, src: portrait }) : null,
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-sm", children: initials || /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "size-5" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-tight tracking-tight", children: name }),
+      title ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: title }) : null,
+      era ? /* @__PURE__ */ jsx(Badge, { className: "self-start", variant: "outline", children: era }) : null
+    ] })
+  ] });
+}
+function FigureLifeBlock({
+  birth,
+  death,
+  lifespanLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx(LifeEventLine, { caption: "Born", event: birth }),
+    /* @__PURE__ */ jsx(LifeEventLine, { caption: "Died", event: death }),
+    /* @__PURE__ */ jsx(
+      LifespanBar,
+      {
+        birthYear: birth?.year,
+        deathYear: death?.year,
+        label: lifespanLabel
+      }
+    )
+  ] });
+}
+const HistoricalFigureCard = forwardRef((props, ref) => {
+  const {
+    biography,
+    birth,
+    className,
+    connections,
+    death,
+    era,
+    fields,
+    labels,
+    name,
+    portrait,
+    profileHref,
+    quote,
+    title,
+    works,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-5 text-foreground shadow-sm",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(FigureHeader, { era, name, portrait, title }),
+        /* @__PURE__ */ jsx(
+          FigureLifeBlock,
+          {
+            birth,
+            death,
+            lifespanLabel: resolvedLabels.lifespan
+          }
+        ),
+        fields && fields.length > 0 ? /* @__PURE__ */ jsx(FigureChips, { heading: resolvedLabels.fields, items: fields }) : null,
+        works && works.length > 0 ? /* @__PURE__ */ jsx(FigureWorksList, { heading: resolvedLabels.works, items: works }) : null,
+        quote ? /* @__PURE__ */ jsx(FigureQuote, { quote }) : null,
+        connections && connections.length > 0 ? /* @__PURE__ */ jsx(
+          FigureConnections,
+          {
+            heading: resolvedLabels.connections,
+            items: connections
+          }
+        ) : null,
+        biography ? /* @__PURE__ */ jsx(
+          FigureBio,
+          {
+            biography,
+            collapseLabel: resolvedLabels.collapseBio,
+            expandLabel: resolvedLabels.expandBio
+          }
+        ) : null,
+        profileHref ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "text-sm font-medium text-primary underline-offset-4 hover:underline",
+            href: profileHref,
+            children: "View full profile \u2192"
+          }
+        ) : null
+      ]
+    }
+  );
+});
+HistoricalFigureCard.displayName = "HistoricalFigureCard";
+export {
+  HistoricalFigureCard
+};

package/dist/components/historical-figure-card/index.js

@@ -0,0 +1,6 @@
+import {
+  HistoricalFigureCard
+} from "./historical-figure-card";
+export {
+  HistoricalFigureCard
+};

package/dist/components/horizontal-scroll-row/horizontal-scroll-row.js

@@ -24,28 +24,28 @@ const HorizontalScrollRow = memo(function HorizontalScrollRow2({
           Button,
           {
             "aria-label": "Scroll left",
-            className: "h-8 w-8",
+            className: "size-8",
             disabled: !canScrollLeft,
             onClick: () => {
               scroll("left");
             },
             size: "icon",
             variant: "outline",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
           }
         ),
         /* @__PURE__ */ jsx(
           Button,
           {
             "aria-label": "Scroll right",
-            className: "h-8 w-8",
+            className: "size-8",
             disabled: !canScrollRight,
             onClick: () => {
               scroll("right");
             },
             size: "icon",
             variant: "outline",
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
           }
         )
       ] }) : null