@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/tweet-card/tweet-card.js

@@ -0,0 +1,243 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/tweet-card/tweet-card.tsx
+const tweetCardVariants = cva(cn("group/tweet relative flex flex-col gap-6 overflow-hidden rounded-xl border border-border bg-card p-6 text-card-foreground", "transition-[border-color,box-shadow] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] hover:shadow-md"));
+/** The avatar's corner shape — the source's `avatarRounded`. */
+const tweetCardAvatarVariants = cva("size-10", {
+	variants: { avatarShape: {
+		circle: "rounded-full",
+		rounded: "rounded",
+		"rounded-md": "rounded-md",
+		"rounded-lg": "rounded-lg"
+	} },
+	defaultVariants: { avatarShape: "rounded" }
+});
+const ENTITY = /(https?:\/\/[^\s]+|@\w{1,15}|#[\p{L}\p{N}_]+)/gu;
+const linkStyles = cn("rounded-sm font-medium text-primary underline-offset-4 hover:underline", focusRing);
+/** Splits plain text into text and links, as react-tweet's entities did. */
+function linkify(text) {
+	return text.split(ENTITY).map((part, index) => {
+		if (index % 2 === 0) return part;
+		const href = part.startsWith("@") ? `https://x.com/${part.slice(1)}` : part.startsWith("#") ? `https://x.com/hashtag/${encodeURIComponent(part.slice(1))}` : part;
+		return /* @__PURE__ */ jsx("a", {
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: linkStyles,
+			children: part
+		}, index);
+	});
+}
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase()).join("");
+}
+/** Truncates a long handle, as the source did at 16 characters. */
+function truncate(value, length) {
+	return value.length <= length ? value : `${value.slice(0, length - 1)}…`;
+}
+function VerifiedBadge() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		"data-slot": "tweet-card-verified",
+		className: "size-4 shrink-0 text-primary",
+		children: [/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M22.5 12.5c0-1.58-.88-2.95-2.18-3.65.16-.44.25-.92.25-1.43 0-2.21-1.71-4-3.83-4-.47 0-.93.09-1.35.25C14.8 2.37 13.5 1.5 12 1.5s-2.8.87-3.39 2.17a3.7 3.7 0 0 0-1.35-.25c-2.12 0-3.83 1.79-3.83 4 0 .51.09.99.25 1.43A4.1 4.1 0 0 0 1.5 12.5c0 1.5.8 2.8 1.98 3.52-.02.15-.03.3-.03.46 0 2.21 1.71 4 3.83 4 .47 0 .93-.09 1.35-.25.59 1.3 1.88 2.17 3.37 2.17s2.78-.87 3.37-2.17c.42.16.88.25 1.35.25 2.12 0 3.83-1.79 3.83-4 0-.16-.01-.31-.03-.46a4.1 4.1 0 0 0 1.98-3.52Z"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m8.5 12.5 2.5 2.5 4.5-5",
+			fill: "none",
+			stroke: "var(--color-primary-foreground)",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function MediaGrid({ media }) {
+	const photos = media.slice(0, 4);
+	const image = (photo, className) => /* @__PURE__ */ jsx("img", {
+		src: photo.src,
+		alt: photo.alt,
+		width: photo.width,
+		height: photo.height,
+		loading: "lazy",
+		draggable: false,
+		className: cn("size-full rounded-xl border border-border object-cover", className)
+	}, photo.src);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "tweet-card-media",
+		className: cn("grid w-full gap-2", photos.length > 1 && "grid-cols-2"),
+		children: photos.map((photo, index) => image(photo, index === 0 && photos.length === 3 ? "row-span-2" : void 0))
+	});
+}
+const METRICS = [
+	{
+		key: "replies",
+		label: "replies",
+		path: "M21 11.5a8.4 8.4 0 0 1-9 8.5 9 9 0 0 1-3.8-.8L3 21l1.8-4.7A8.4 8.4 0 0 1 3 11.5 8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z"
+	},
+	{
+		key: "reposts",
+		label: "reposts",
+		path: "m17 2 4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4m14-1v2a3 3 0 0 1-3 3H3"
+	},
+	{
+		key: "likes",
+		label: "likes",
+		path: "M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z"
+	},
+	{
+		key: "views",
+		label: "views",
+		path: "M3 3v18h18M7 16V9m5 7V5m5 11v-4"
+	}
+];
+/** A social post rendered from props — no network, no embed script. */
+function TweetCard({ className, author, text, media, timestamp, metrics, href, userInfoPosition = "bottom", avatarShape, locale, linkLabel = "View post on X", id, ...props }) {
+	const uid = useId();
+	const nameId = `${id ?? uid}-author`;
+	const date = timestamp === void 0 ? void 0 : new Date(timestamp);
+	const validDate = date && !Number.isNaN(date.getTime()) ? date : void 0;
+	const count = new Intl.NumberFormat(locale, { notation: "compact" });
+	const shown = METRICS.filter(({ key }) => metrics?.[key] !== void 0);
+	const userInfo = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tweet-card-author",
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("a", {
+			href: author.href ?? `https://x.com/${author.handle}`,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			tabIndex: -1,
+			"aria-hidden": "true",
+			className: "shrink-0",
+			children: /* @__PURE__ */ jsxs(Avatar, {
+				className: tweetCardAvatarVariants({ avatarShape }),
+				children: [author.avatar ? /* @__PURE__ */ jsx(AvatarImage, {
+					src: author.avatar,
+					alt: ""
+				}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+					className: "rounded-[inherit]",
+					children: initials(author.name)
+				})]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "flex items-center gap-1 text-sm font-semibold tracking-tight",
+				children: [/* @__PURE__ */ jsx("a", {
+					id: nameId,
+					href: author.href ?? `https://x.com/${author.handle}`,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: cn("truncate rounded-sm hover:underline", focusRing),
+					children: author.name
+				}), author.verified ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(VerifiedBadge, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Verified account"
+				})] }) : null]
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: ["@", truncate(author.handle, 16)]
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		"data-slot": "tweet-card",
+		"aria-labelledby": nameId,
+		className: cn(tweetCardVariants(), className),
+		...props,
+		children: [
+			userInfoPosition === "top" ? userInfo : null,
+			/* @__PURE__ */ jsx("blockquote", {
+				"data-slot": "tweet-card-text",
+				cite: href,
+				className: "text-sm tracking-tight text-balance whitespace-pre-line",
+				children: typeof text === "string" ? linkify(text) : text
+			}),
+			media && media.length > 0 ? /* @__PURE__ */ jsx(MediaGrid, { media }) : null,
+			validDate || shown.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground",
+				children: [validDate ? /* @__PURE__ */ jsx("time", {
+					dateTime: validDate.toISOString(),
+					children: validDate.toLocaleDateString(locale, {
+						year: "numeric",
+						month: "short",
+						day: "numeric"
+					})
+				}) : null, shown.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					"data-slot": "tweet-card-metrics",
+					className: "flex items-center gap-4",
+					children: shown.map(({ key, label, path }) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								"aria-hidden": "true",
+								className: "size-3.5",
+								children: /* @__PURE__ */ jsx("path", { d: path })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: count.format(metrics?.[key] ?? 0)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: `${String(metrics?.[key] ?? 0)} ${label}`
+							})
+						]
+					}, key))
+				}) : null]
+			}) : null,
+			userInfoPosition === "bottom" ? userInfo : null,
+			href ? /* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				"aria-label": linkLabel,
+				"data-slot": "tweet-card-link",
+				className: cn("absolute end-6 bottom-6 z-10 grid size-8 place-items-center rounded-full border border-border bg-primary text-primary-foreground", "opacity-0 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-hover/tweet:opacity-100 hover:scale-110 focus-visible:opacity-100 [@media(hover:none)]:opacity-100", focusRing),
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					className: "size-4",
+					children: /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" })
+				})
+			}) : null
+		]
+	});
+}
+/** Placeholder while a post loads — the source's TweetSkeleton. */
+function TweetCardSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tweet-card-skeleton",
+		"aria-hidden": "true",
+		className: cn("flex w-full flex-col gap-2 rounded-xl border border-border p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })]
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })]
+	});
+}
+//#endregion
+export { TweetCard, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };
+
+//# sourceMappingURL=tweet-card.js.map

package/dist/components/tweet-card/tweet-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tweet-card.js","names":[],"sources":["../../../src/components/tweet-card/tweet-card.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Tweet Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useId, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Skeleton } from \"@/components/skeleton\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A post, drawn from props. The source fetched it with react-tweet; this\n * never touches the network, so it renders on the server, in a static\n * export and in a test, and the data can come from any API — or be written\n * by hand for a testimonial wall.\n *\n * The source's \"open\" control was a button calling window.open that only\n * appeared on hover. Here it is a real link, revealed on hover *and* on\n * keyboard focus, and always visible on devices that cannot hover.\n */\n\nconst tweetCardVariants = cva(\n  cn(\n    \"group/tweet relative flex flex-col gap-6 overflow-hidden rounded-xl border border-border bg-card p-6 text-card-foreground\",\n    \"transition-[border-color,box-shadow] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] hover:shadow-md\",\n  ),\n);\n\n/** The avatar's corner shape — the source's `avatarRounded`. */\nconst tweetCardAvatarVariants = cva(\"size-10\", {\n  variants: {\n    avatarShape: {\n      circle: \"rounded-full\",\n      rounded: \"rounded\",\n      \"rounded-md\": \"rounded-md\",\n      \"rounded-lg\": \"rounded-lg\",\n    },\n  },\n  defaultVariants: {\n    avatarShape: \"rounded\",\n  },\n});\n\nexport interface TweetCardAuthor {\n  name: string;\n  /** Without the leading \"@\". */\n  handle: string;\n  /** Image URL. Initials are shown while it loads and if it fails. */\n  avatar?: string;\n  verified?: boolean;\n  /** Profile URL. Defaults to the handle on x.com. */\n  href?: string;\n}\n\nexport interface TweetCardMedia {\n  src: string;\n  /** Describe the image; an empty string marks it decorative. */\n  alt: string;\n  width?: number;\n  height?: number;\n}\n\nexport interface TweetCardMetrics {\n  replies?: number;\n  reposts?: number;\n  likes?: number;\n  views?: number;\n}\n\nexport interface TweetCardProps\n  extends\n    Omit<ComponentPropsWithRef<\"article\">, \"children\">,\n    VariantProps<typeof tweetCardAvatarVariants> {\n  author: TweetCardAuthor;\n  /** A string is linked: URLs, @mentions and #hashtags. Pass nodes to control it. */\n  text: ReactNode;\n  /** Up to four photos, laid out as the source did. */\n  media?: TweetCardMedia[];\n  timestamp?: Date | string;\n  metrics?: TweetCardMetrics;\n  /** The post's URL. Adds the \"view post\" link. */\n  href?: string;\n  /** Where the author sits. */\n  userInfoPosition?: \"top\" | \"bottom\";\n  /** BCP 47 locale for the date and counts. */\n  locale?: string;\n  /** Name of the link to the post. */\n  linkLabel?: string;\n}\n\nconst ENTITY = /(https?:\\/\\/[^\\s]+|@\\w{1,15}|#[\\p{L}\\p{N}_]+)/gu;\n\nconst linkStyles = cn(\n  \"rounded-sm font-medium text-primary underline-offset-4 hover:underline\",\n  focusRing,\n);\n\n/** Splits plain text into text and links, as react-tweet's entities did. */\nfunction linkify(text: string): ReactNode[] {\n  return text.split(ENTITY).map((part, index) => {\n    if (index % 2 === 0) return part;\n    const href = part.startsWith(\"@\")\n      ? `https://x.com/${part.slice(1)}`\n      : part.startsWith(\"#\")\n        ? `https://x.com/hashtag/${encodeURIComponent(part.slice(1))}`\n        : part;\n    return (\n      <a\n        key={index}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={linkStyles}\n      >\n        {part}\n      </a>\n    );\n  });\n}\n\nfunction initials(name: string): string {\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word[0]?.toUpperCase())\n    .join(\"\");\n}\n\n/** Truncates a long handle, as the source did at 16 characters. */\nexport function truncate(value: string, length: number): string {\n  return value.length <= length ? value : `${value.slice(0, length - 1)}…`;\n}\n\nfunction VerifiedBadge() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      data-slot=\"tweet-card-verified\"\n      className=\"size-4 shrink-0 text-primary\"\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M22.5 12.5c0-1.58-.88-2.95-2.18-3.65.16-.44.25-.92.25-1.43 0-2.21-1.71-4-3.83-4-.47 0-.93.09-1.35.25C14.8 2.37 13.5 1.5 12 1.5s-2.8.87-3.39 2.17a3.7 3.7 0 0 0-1.35-.25c-2.12 0-3.83 1.79-3.83 4 0 .51.09.99.25 1.43A4.1 4.1 0 0 0 1.5 12.5c0 1.5.8 2.8 1.98 3.52-.02.15-.03.3-.03.46 0 2.21 1.71 4 3.83 4 .47 0 .93-.09 1.35-.25.59 1.3 1.88 2.17 3.37 2.17s2.78-.87 3.37-2.17c.42.16.88.25 1.35.25 2.12 0 3.83-1.79 3.83-4 0-.16-.01-.31-.03-.46a4.1 4.1 0 0 0 1.98-3.52Z\"\n      />\n      <path\n        d=\"m8.5 12.5 2.5 2.5 4.5-5\"\n        fill=\"none\"\n        stroke=\"var(--color-primary-foreground)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction MediaGrid({ media }: { media: TweetCardMedia[] }) {\n  const photos = media.slice(0, 4);\n  const image = (photo: TweetCardMedia, className?: string) => (\n    <img\n      key={photo.src}\n      src={photo.src}\n      alt={photo.alt}\n      width={photo.width}\n      height={photo.height}\n      loading=\"lazy\"\n      draggable={false}\n      className={cn(\"size-full rounded-xl border border-border object-cover\", className)}\n    />\n  );\n  return (\n    <div\n      data-slot=\"tweet-card-media\"\n      className={cn(\"grid w-full gap-2\", photos.length > 1 && \"grid-cols-2\")}\n    >\n      {photos.map((photo, index) =>\n        image(photo, index === 0 && photos.length === 3 ? \"row-span-2\" : undefined),\n      )}\n    </div>\n  );\n}\n\nconst METRICS: { key: keyof TweetCardMetrics; label: string; path: string }[] = [\n  {\n    key: \"replies\",\n    label: \"replies\",\n    path: \"M21 11.5a8.4 8.4 0 0 1-9 8.5 9 9 0 0 1-3.8-.8L3 21l1.8-4.7A8.4 8.4 0 0 1 3 11.5 8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z\",\n  },\n  {\n    key: \"reposts\",\n    label: \"reposts\",\n    path: \"m17 2 4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4m14-1v2a3 3 0 0 1-3 3H3\",\n  },\n  {\n    key: \"likes\",\n    label: \"likes\",\n    path: \"M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z\",\n  },\n  { key: \"views\", label: \"views\", path: \"M3 3v18h18M7 16V9m5 7V5m5 11v-4\" },\n];\n\n/** A social post rendered from props — no network, no embed script. */\nexport function TweetCard({\n  className,\n  author,\n  text,\n  media,\n  timestamp,\n  metrics,\n  href,\n  userInfoPosition = \"bottom\",\n  avatarShape,\n  locale,\n  linkLabel = \"View post on X\",\n  id,\n  ...props\n}: TweetCardProps) {\n  const uid = useId();\n  const nameId = `${id ?? uid}-author`;\n  const date = timestamp === undefined ? undefined : new Date(timestamp);\n  const validDate = date && !Number.isNaN(date.getTime()) ? date : undefined;\n  const count = new Intl.NumberFormat(locale, { notation: \"compact\" });\n  const shown = METRICS.filter(({ key }) => metrics?.[key] !== undefined);\n\n  const userInfo = (\n    <div data-slot=\"tweet-card-author\" className=\"flex items-center gap-2\">\n      <a\n        href={author.href ?? `https://x.com/${author.handle}`}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        className=\"shrink-0\"\n      >\n        <Avatar className={tweetCardAvatarVariants({ avatarShape })}>\n          {author.avatar ? <AvatarImage src={author.avatar} alt=\"\" /> : null}\n          <AvatarFallback className=\"rounded-[inherit]\">{initials(author.name)}</AvatarFallback>\n        </Avatar>\n      </a>\n      <div className=\"min-w-0\">\n        <p className=\"flex items-center gap-1 text-sm font-semibold tracking-tight\">\n          <a\n            id={nameId}\n            href={author.href ?? `https://x.com/${author.handle}`}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={cn(\"truncate rounded-sm hover:underline\", focusRing)}\n          >\n            {author.name}\n          </a>\n          {author.verified ? (\n            <>\n              <VerifiedBadge />\n              <span className=\"sr-only\">Verified account</span>\n            </>\n          ) : null}\n        </p>\n        <p className=\"text-xs text-muted-foreground\">@{truncate(author.handle, 16)}</p>\n      </div>\n    </div>\n  );\n\n  return (\n    <article\n      id={id}\n      data-slot=\"tweet-card\"\n      aria-labelledby={nameId}\n      className={cn(tweetCardVariants(), className)}\n      {...props}\n    >\n      {userInfoPosition === \"top\" ? userInfo : null}\n      <blockquote\n        data-slot=\"tweet-card-text\"\n        cite={href}\n        className=\"text-sm tracking-tight text-balance whitespace-pre-line\"\n      >\n        {typeof text === \"string\" ? linkify(text) : text}\n      </blockquote>\n      {media && media.length > 0 ? <MediaGrid media={media} /> : null}\n      {validDate || shown.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground\">\n          {validDate ? (\n            <time dateTime={validDate.toISOString()}>\n              {validDate.toLocaleDateString(locale, {\n                year: \"numeric\",\n                month: \"short\",\n                day: \"numeric\",\n              })}\n            </time>\n          ) : null}\n          {shown.length > 0 ? (\n            <ul data-slot=\"tweet-card-metrics\" className=\"flex items-center gap-4\">\n              {shown.map(({ key, label, path }) => (\n                <li key={key} className=\"flex items-center gap-1\">\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"size-3.5\"\n                  >\n                    <path d={path} />\n                  </svg>\n                  <span aria-hidden=\"true\">{count.format(metrics?.[key] ?? 0)}</span>\n                  <span className=\"sr-only\">{`${String(metrics?.[key] ?? 0)} ${label}`}</span>\n                </li>\n              ))}\n            </ul>\n          ) : null}\n        </div>\n      ) : null}\n      {userInfoPosition === \"bottom\" ? userInfo : null}\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label={linkLabel}\n          data-slot=\"tweet-card-link\"\n          className={cn(\n            \"absolute end-6 bottom-6 z-10 grid size-8 place-items-center rounded-full border border-border bg-primary text-primary-foreground\",\n            \"opacity-0 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"group-hover/tweet:opacity-100 hover:scale-110 focus-visible:opacity-100 [@media(hover:none)]:opacity-100\",\n            focusRing,\n          )}\n        >\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n            className=\"size-4\"\n          >\n            <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3\" />\n          </svg>\n        </a>\n      ) : null}\n    </article>\n  );\n}\n\n/** Placeholder while a post loads — the source's TweetSkeleton. */\nexport function TweetCardSkeleton({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"tweet-card-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex w-full flex-col gap-2 rounded-xl border border-border p-4\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex gap-2\">\n        <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n        <Skeleton className=\"h-10 w-full\" />\n      </div>\n      <Skeleton className=\"h-20 w-full\" />\n    </div>\n  );\n}\n\nexport { tweetCardAvatarVariants, tweetCardVariants };\n"],"mappings":"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"}

package/dist/components/typewriter-text/index.d.ts

@@ -0,0 +1,2 @@
+import { TypewriterText, TypewriterTextElement, TypewriterTextProps, typewriterTextVariants } from "./typewriter-text.js";
+export { TypewriterText, type TypewriterTextElement, type TypewriterTextProps, typewriterTextVariants };

package/dist/components/typewriter-text/index.js

@@ -0,0 +1,2 @@
+import { TypewriterText, typewriterTextVariants } from "./typewriter-text.js";
+export { TypewriterText, typewriterTextVariants };

package/dist/components/typewriter-text/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/typewriter-text/meta.ts
+const meta = defineMeta({
+	name: "typewriter-text",
+	title: "Typewriter Text",
+	description: "Types text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["typewriter-text.tsx"],
+	a11y: "The typed characters are aria-hidden and an sr-only copy holds the full text (every item, for a list), so a screen reader reads it once and never per character. The server renders the finished text, and the untyped remainder reserves its space so nothing reflows. Under reduced motion the full text shows immediately."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/typewriter-text/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/typewriter-text/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"typewriter-text\",\n  title: \"Typewriter Text\",\n  description:\n    \"Types text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"typewriter-text.tsx\"],\n  a11y:\n    \"The typed characters are aria-hidden and an sr-only copy holds the full text (every item, for a list), so a \" +\n    \"screen reader reads it once and never per character. The server renders the finished text, and the untyped \" +\n    \"remainder reserves its space so nothing reflows. Under reduced motion the full text shows immediately.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAGJ,CAAC"}

package/dist/components/typewriter-text/typewriter-text.d.ts

@@ -0,0 +1,33 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/components/typewriter-text/typewriter-text.d.ts
+/** Elements text effects render as. They are all phrasing or heading content. */
+type TypewriterTextElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+declare const typewriterTextVariants: (props?: ({
+  caret?: "none" | "block" | "bar" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TypewriterTextProps extends Omit<ComponentPropsWithRef<"span">, "ref" | "children">, VariantProps<typeof typewriterTextVariants> {
+  ref?: Ref<HTMLElement>;
+  /** One string to type, or a list to type, delete and cycle through. */
+  children: string | readonly string[];
+  /** The element to render. */
+  as?: TypewriterTextElement;
+  /** Milliseconds per typed character. */
+  speed?: number;
+  /** Milliseconds per deleted character, for a list. Defaults to half of `speed`. */
+  deleteSpeed?: number;
+  /** Milliseconds a finished string holds before it restarts or is deleted. */
+  pause?: number;
+  /**
+   * Keep going. A single string clears and retypes; a list cycles back to its
+   * first item. Defaults to `false` for a string and `true` for a list.
+   */
+  loop?: boolean;
+  /** Milliseconds before typing starts. */
+  startDelay?: number;
+}
+/** Types text behind a caret, once, in a loop, or cycling through a list. */
+declare function TypewriterText({ as: Component, children, speed, deleteSpeed, pause, loop, startDelay, caret, className, ref, ...props }: TypewriterTextProps): import("react").JSX.Element;
+//#endregion
+export { TypewriterText, TypewriterTextElement, TypewriterTextProps, typewriterTextVariants };
+//# sourceMappingURL=typewriter-text.d.ts.map

package/dist/components/typewriter-text/typewriter-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typewriter-text.d.ts","names":[],"sources":["../../../src/components/typewriter-text/typewriter-text.tsx"],"mappings":";;;;KAmCY;cAGN,yBAAsB;;6CAe3B;UAEgB,4BAEb,KAAK,oDACL,oBAAoB;EACtB,MAAM,IAAI;;EAEV;;EAEA,KAAK;;EAEL;;EAEA;;EAEA;;;;;EAKA;;EAEA;;;iBAuBc,iBACd,IAAI,WACJ,UACA,OACA,aACA,OACA,MACA,YACA,OACA,WACA,QACG,SACF,sCAAmB,IAAA"}

package/dist/components/typewriter-text/typewriter-text.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+//#region src/components/typewriter-text/typewriter-text.tsx
+const typewriterTextVariants = cva("ms-px inline-block h-[1em] w-0.5 translate-y-[0.1em] bg-current align-baseline", {
+	variants: { 
+	/** `bar` is a thin vertical caret, `block` a character-wide cell, `none` hides it. */
+caret: {
+		bar: "animate-caret",
+		block: "w-[0.55em] animate-caret opacity-70",
+		none: "hidden"
+	} },
+	defaultVariants: { caret: "bar" }
+});
+function reducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Types text behind a caret, once, in a loop, or cycling through a list. */
+function TypewriterText({ as: Component = "span", children, speed = 50, deleteSpeed, pause = 1e3, loop, startDelay = 0, caret, className, ref, ...props }) {
+	const items = typeof children === "string" ? [children] : children;
+	const isList = typeof children !== "string";
+	const repeats = loop ?? isList;
+	const key = JSON.stringify(items);
+	const [cursor, setCursor] = useState(() => ({
+		item: 0,
+		typed: items[0]?.length ?? 0
+	}));
+	useIsomorphicLayoutEffect(() => {
+		const strings = JSON.parse(key);
+		const first = strings[0] ?? "";
+		if (reducedMotion()) {
+			setCursor({
+				item: 0,
+				typed: first.length
+			});
+			return;
+		}
+		let timer;
+		let item = 0;
+		let typed = 0;
+		let deleting = false;
+		setCursor({
+			item,
+			typed
+		});
+		const tick = () => {
+			const text = strings[item] ?? "";
+			if (!deleting && typed < text.length) {
+				typed += 1;
+				setCursor({
+					item,
+					typed
+				});
+				timer = setTimeout(tick, typed < text.length ? speed : pause);
+				return;
+			}
+			if (!deleting) {
+				if (strings.length > 1) {
+					if (item === strings.length - 1 && !repeats) return;
+					deleting = true;
+					tick();
+					return;
+				}
+				if (!repeats) return;
+				typed = 0;
+				tick();
+				return;
+			}
+			if (typed > 0) {
+				typed -= 1;
+				setCursor({
+					item,
+					typed
+				});
+				timer = setTimeout(tick, deleteSpeed ?? speed / 2);
+				return;
+			}
+			deleting = false;
+			item = (item + 1) % strings.length;
+			timer = setTimeout(tick, speed);
+		};
+		if (startDelay > 0) timer = setTimeout(tick, startDelay);
+		else tick();
+		return () => {
+			if (timer) clearTimeout(timer);
+		};
+	}, [
+		key,
+		speed,
+		deleteSpeed,
+		pause,
+		repeats,
+		startDelay
+	]);
+	const setRef = useCallback((element) => {
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
+	const current = items[cursor.item] ?? "";
+	const shown = current.slice(0, cursor.typed);
+	const rest = current.slice(cursor.typed);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref: setRef,
+		"data-slot": "typewriter-text",
+		"data-state": cursor.typed >= current.length ? "complete" : "typing",
+		className: cn(className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-slot": "typewriter-text-typed",
+			"aria-hidden": "true",
+			children: [
+				shown,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "typewriter-text-caret",
+					className: typewriterTextVariants({ caret })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "typewriter-text-rest",
+					className: "invisible",
+					children: rest
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: isList ? items.join(", ") : current
+		})]
+	});
+}
+//#endregion
+export { TypewriterText, typewriterTextVariants };
+
+//# sourceMappingURL=typewriter-text.js.map

package/dist/components/typewriter-text/typewriter-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typewriter-text.js","names":[],"sources":["../../../src/components/typewriter-text/typewriter-text.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Typewriter Text (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n  type ComponentPropsWithRef,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Types a string a character at a time behind a blinking caret.\n *\n * - One string types once, or with `loop` clears and retypes after a pause —\n *   the source's behaviour, at its defaults (50ms a character, 1s pause). A\n *   list of strings types each one, holds it, deletes it and moves on: the\n *   rotating-headline form the source's `loop` implies.\n * - The untyped remainder is rendered, invisible, after the caret. The line\n *   reserves its full width and height from the first frame, so the page does\n *   not reflow a character at a time.\n * - The server renders the finished text, so the markup is legible without\n *   JavaScript; typing starts from empty before the first paint on the client.\n * - The whole string sits in an sr-only copy and the typed glyphs are\n *   aria-hidden, so a screen reader reads the text once, never per character.\n * - Under reduced motion the full text shows immediately and nothing cycles.\n *   The caret reuses the theme's `animate-caret`, which the reduced-motion\n *   blanket stops.\n */\n\n/** Elements text effects render as. They are all phrasing or heading content. */\nexport type TypewriterTextElement =\n  \"span\" | \"p\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst typewriterTextVariants = cva(\n  \"ms-px inline-block h-[1em] w-0.5 translate-y-[0.1em] bg-current align-baseline\",\n  {\n    variants: {\n      /** `bar` is a thin vertical caret, `block` a character-wide cell, `none` hides it. */\n      caret: {\n        bar: \"animate-caret\",\n        block: \"w-[0.55em] animate-caret opacity-70\",\n        none: \"hidden\",\n      },\n    },\n    defaultVariants: {\n      caret: \"bar\",\n    },\n  },\n);\n\nexport interface TypewriterTextProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"ref\" | \"children\">,\n    VariantProps<typeof typewriterTextVariants> {\n  ref?: Ref<HTMLElement>;\n  /** One string to type, or a list to type, delete and cycle through. */\n  children: string | readonly string[];\n  /** The element to render. */\n  as?: TypewriterTextElement;\n  /** Milliseconds per typed character. */\n  speed?: number;\n  /** Milliseconds per deleted character, for a list. Defaults to half of `speed`. */\n  deleteSpeed?: number;\n  /** Milliseconds a finished string holds before it restarts or is deleted. */\n  pause?: number;\n  /**\n   * Keep going. A single string clears and retypes; a list cycles back to its\n   * first item. Defaults to `false` for a string and `true` for a list.\n   */\n  loop?: boolean;\n  /** Milliseconds before typing starts. */\n  startDelay?: number;\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n// Layout effect on the client, so typing starts from empty before first paint;\n// a plain effect on the server, where neither runs.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ninterface Cursor {\n  /** Which string is showing. */\n  item: number;\n  /** How many of its characters are typed. */\n  typed: number;\n}\n\n/** Types text behind a caret, once, in a loop, or cycling through a list. */\nexport function TypewriterText({\n  as: Component = \"span\",\n  children,\n  speed = 50,\n  deleteSpeed,\n  pause = 1000,\n  loop,\n  startDelay = 0,\n  caret,\n  className,\n  ref,\n  ...props\n}: TypewriterTextProps) {\n  const items: readonly string[] = typeof children === \"string\" ? [children] : children;\n  const isList = typeof children !== \"string\";\n  const repeats = loop ?? isList;\n  // A stable key for the effect: the strings themselves, not the array identity.\n  const key = JSON.stringify(items);\n\n  // Finished text first, for the server and for reduced motion.\n  const [cursor, setCursor] = useState<Cursor>(() => ({\n    item: 0,\n    typed: items[0]?.length ?? 0,\n  }));\n\n  useIsomorphicLayoutEffect(() => {\n    const strings = JSON.parse(key) as string[];\n    const first = strings[0] ?? \"\";\n    if (reducedMotion()) {\n      setCursor({ item: 0, typed: first.length });\n      return;\n    }\n\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let item = 0;\n    let typed = 0;\n    let deleting = false;\n    setCursor({ item, typed });\n\n    const tick = () => {\n      const text = strings[item] ?? \"\";\n      if (!deleting && typed < text.length) {\n        typed += 1;\n        setCursor({ item, typed });\n        timer = setTimeout(tick, typed < text.length ? speed : pause);\n        return;\n      }\n      // The string is complete.\n      if (!deleting) {\n        if (strings.length > 1) {\n          const last = item === strings.length - 1;\n          if (last && !repeats) return;\n          deleting = true;\n          tick();\n          return;\n        }\n        if (!repeats) return;\n        // A single string clears at once and retypes, as the source did.\n        typed = 0;\n        tick();\n        return;\n      }\n      if (typed > 0) {\n        typed -= 1;\n        setCursor({ item, typed });\n        timer = setTimeout(tick, deleteSpeed ?? speed / 2);\n        return;\n      }\n      deleting = false;\n      item = (item + 1) % strings.length;\n      timer = setTimeout(tick, speed);\n    };\n\n    // The first character lands at once, as in the source, unless delayed.\n    if (startDelay > 0) timer = setTimeout(tick, startDelay);\n    else tick();\n    return () => {\n      if (timer) clearTimeout(timer);\n    };\n  }, [key, speed, deleteSpeed, pause, repeats, startDelay]);\n\n  // Accepts a ref to any of the `as` elements.\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    },\n    [ref],\n  );\n\n  const current = items[cursor.item] ?? \"\";\n  const shown = current.slice(0, cursor.typed);\n  const rest = current.slice(cursor.typed);\n\n  return (\n    <Component\n      ref={setRef}\n      data-slot=\"typewriter-text\"\n      data-state={cursor.typed >= current.length ? \"complete\" : \"typing\"}\n      className={cn(className)}\n      {...props}\n    >\n      <span data-slot=\"typewriter-text-typed\" aria-hidden=\"true\">\n        {shown}\n        <span data-slot=\"typewriter-text-caret\" className={typewriterTextVariants({ caret })} />\n        <span data-slot=\"typewriter-text-rest\" className=\"invisible\">\n          {rest}\n        </span>\n      </span>\n      <span className=\"sr-only\">{isList ? items.join(\", \") : current}</span>\n    </Component>\n  );\n}\n\nexport { typewriterTextVariants };\n"],"mappings":"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"}

package/dist/components/uptime-matrix/index.d.ts

@@ -0,0 +1,2 @@
+import { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeDay, UptimeMatrix, UptimeMatrixProps, UptimeStatus, dayFromKey, uptimeMatrixVariants } from "./uptime-matrix.js";
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, type UptimeDay, UptimeMatrix, type UptimeMatrixProps, type UptimeStatus, dayFromKey, uptimeMatrixVariants };

package/dist/components/uptime-matrix/index.js

@@ -0,0 +1,2 @@
+import { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeMatrix, dayFromKey, uptimeMatrixVariants } from "./uptime-matrix.js";
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeMatrix, dayFromKey, uptimeMatrixVariants };

package/dist/components/uptime-matrix/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/uptime-matrix/meta.ts
+const meta = defineMeta({
+	name: "uptime-matrix",
+	title: "Uptime Matrix",
+	description: "A day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["uptime-matrix.tsx"],
+	a11y: "The tiles are role=\"img\" with an aria-label counting each state and the average uptime. Over them sits a role=\"grid\" of gridcells with one roving tab stop: arrow keys move a day, Home/End go to the row's ends, Ctrl+Home/End to the first and last day, Escape hides the readout; each cell's text is its readout. State is never colour alone: degraded tiles are striped, outages solid, and the legend, readout and table name every state. Axis labels are aria-hidden; the data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/uptime-matrix/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/uptime-matrix/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"uptime-matrix\",\n  title: \"Uptime Matrix\",\n  description:\n    \"A day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"uptime-matrix.tsx\"],\n  a11y:\n    'The tiles are role=\"img\" with an aria-label counting each state and the average uptime. ' +\n    'Over them sits a role=\"grid\" of gridcells with one roving tab stop: arrow keys move a day, ' +\n    \"Home/End go to the row's ends, Ctrl+Home/End to the first and last day, Escape hides the \" +\n    \"readout; each cell's text is its readout. State is never colour alone: degraded tiles are \" +\n    \"striped, outages solid, and the legend, readout and table name every state. Axis labels are \" +\n    \"aria-hidden; the data is always in a table, visually hidden unless showTable is set.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,eAAe;CACtC,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAMJ,CAAC"}

package/dist/components/uptime-matrix/uptime-matrix.d.ts

@@ -0,0 +1,60 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/uptime-matrix/uptime-matrix.d.ts
+declare const uptimeMatrixVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type UptimeStatus = "operational" | "degraded" | "outage" | "unknown";
+interface UptimeDay {
+  /** The day's name, e.g. a date. */
+  label: string;
+  status: UptimeStatus;
+  /** Uptime that day, in percent. */
+  uptime?: number;
+  /** A note for the readout, e.g. the incident. */
+  note?: string;
+}
+interface UptimeMatrixProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof uptimeMatrixVariants> {
+  days: readonly UptimeDay[];
+  /** What the matrix shows. Names the image, the grid and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Tiles per row. Default: every day in one row. */
+  columns?: number;
+  /** Names for each state (translate here). */
+  statusLabels?: Partial<Record<UptimeStatus, string>>;
+  formatUptime?: (percent: number) => string;
+  /** Show the state legend with counts. */
+  showLegend?: boolean;
+  /** Show the first and last day under the tiles. */
+  showAxis?: boolean;
+  /** Replace the axis labels, e.g. "90 days ago" and "Today". */
+  startLabel?: string;
+  endLabel?: string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  /** Cell pitch in CSS pixels. Default 2: tiles are thin. */
+  cell?: number;
+  /** The day whose readout shows (controlled); null hides it. */
+  activeIndex?: number | null;
+  defaultActiveIndex?: number | null;
+  onActiveIndexChange?: (index: number | null) => void;
+  /** Data table headers. */
+  dayLabel?: string;
+  statusLabel?: string;
+  uptimeLabel?: string;
+  noteLabel?: string;
+}
+/** Gap between tiles in CSS pixels. */
+declare const UPTIME_GAP = 2;
+declare const UPTIME_STATUSES: readonly UptimeStatus[];
+/** The state token for each status. */
+declare const UPTIME_COLORS: Readonly<Record<UptimeStatus, string>>;
+/** The day a grid key moves to, or null when the key is not a grid key. */
+declare function dayFromKey(key: string, ctrl: boolean, index: number, count: number, columns: number): number | null;
+declare function UptimeMatrix({ days, label, description, columns, statusLabels, formatUptime, showLegend, showAxis, startLabel, endLabel, size, showTable, animate, cell, activeIndex, defaultActiveIndex, onActiveIndexChange, dayLabel, statusLabel, uptimeLabel, noteLabel, className, ...props }: UptimeMatrixProps): import("react").JSX.Element;
+//#endregion
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeDay, UptimeMatrix, UptimeMatrixProps, UptimeStatus, dayFromKey, uptimeMatrixVariants };
+//# sourceMappingURL=uptime-matrix.d.ts.map

package/dist/components/uptime-matrix/uptime-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uptime-matrix.d.ts","names":[],"sources":["../../../src/components/uptime-matrix/uptime-matrix.tsx"],"mappings":";;;cAwCa,uBAAoB;;6CAS/B;KAEU;UAEK;;EAEf;EACA,QAAQ;;EAER;;EAEA;;UAGe,0BAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;;EAEA;;EAEA,eAAe,QAAQ,OAAO;EAC9B,gBAAgB;;EAEhB;;EAEA;;EAEA;EACA;;EAEA;EACA;;EAEA;;EAEA;EACA;EACA,uBAAuB;;EAEvB;EACA;EACA;EACA;;;cAIW;cAEA,0BAA0B;;cAQ1B,eAAe,SAAS,OAAO;;iBAe5B,WACd,aACA,eACA,eACA,eACA;iBAuBc,eACd,MACA,OACA,aACA,SACA,cACA,cACA,YACA,UACA,YACA,UACA,MACA,WACA,SACA,MACA,aACA,oBACA,qBACA,UACA,aACA,aACA,WACA,cACG,SACF,oCAAiB,IAAA"}