@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/tweet-card/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "tweet-card",
+  title: "Tweet Card",
+  description:
+    "A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["avatar", "skeleton"],
+  files: ["tweet-card.tsx"],
+  a11y:
+    "An article named by its author, with the post in a blockquote citing its URL. URLs, @mentions and " +
+    "#hashtags in string text become real links. The link to the post is a real, named link revealed on " +
+    "hover and on keyboard focus, and always shown on devices that cannot hover. The avatar is decorative " +
+    "(the name beside it is the link); verification is announced as text, counts are read in full " +
+    '("1200 likes", not "1.2K"), and the date is a <time> element. Photos need alt text.',
+});

package/src/components/tweet-card/tweet-card.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+// Ported from SmoothUI Tweet Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { useId, type ComponentPropsWithRef, type ReactNode } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/avatar";
+import { Skeleton } from "@/components/skeleton";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A post, drawn from props. The source fetched it with react-tweet; this
+ * never touches the network, so it renders on the server, in a static
+ * export and in a test, and the data can come from any API — or be written
+ * by hand for a testimonial wall.
+ *
+ * The source's "open" control was a button calling window.open that only
+ * appeared on hover. Here it is a real link, revealed on hover *and* on
+ * keyboard focus, and always visible on devices that cannot hover.
+ */
+
+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",
+  },
+});
+
+export interface TweetCardAuthor {
+  name: string;
+  /** Without the leading "@". */
+  handle: string;
+  /** Image URL. Initials are shown while it loads and if it fails. */
+  avatar?: string;
+  verified?: boolean;
+  /** Profile URL. Defaults to the handle on x.com. */
+  href?: string;
+}
+
+export interface TweetCardMedia {
+  src: string;
+  /** Describe the image; an empty string marks it decorative. */
+  alt: string;
+  width?: number;
+  height?: number;
+}
+
+export interface TweetCardMetrics {
+  replies?: number;
+  reposts?: number;
+  likes?: number;
+  views?: number;
+}
+
+export interface TweetCardProps
+  extends
+    Omit<ComponentPropsWithRef<"article">, "children">,
+    VariantProps<typeof tweetCardAvatarVariants> {
+  author: TweetCardAuthor;
+  /** A string is linked: URLs, @mentions and #hashtags. Pass nodes to control it. */
+  text: ReactNode;
+  /** Up to four photos, laid out as the source did. */
+  media?: TweetCardMedia[];
+  timestamp?: Date | string;
+  metrics?: TweetCardMetrics;
+  /** The post's URL. Adds the "view post" link. */
+  href?: string;
+  /** Where the author sits. */
+  userInfoPosition?: "top" | "bottom";
+  /** BCP 47 locale for the date and counts. */
+  locale?: string;
+  /** Name of the link to the post. */
+  linkLabel?: string;
+}
+
+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: string): ReactNode[] {
+  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 (
+      <a
+        key={index}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={linkStyles}
+      >
+        {part}
+      </a>
+    );
+  });
+}
+
+function initials(name: string): string {
+  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. */
+export function truncate(value: string, length: number): string {
+  return value.length <= length ? value : `${value.slice(0, length - 1)}…`;
+}
+
+function VerifiedBadge() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      data-slot="tweet-card-verified"
+      className="size-4 shrink-0 text-primary"
+    >
+      <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"
+      />
+      <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"
+      />
+    </svg>
+  );
+}
+
+function MediaGrid({ media }: { media: TweetCardMedia[] }) {
+  const photos = media.slice(0, 4);
+  const image = (photo: TweetCardMedia, className?: string) => (
+    <img
+      key={photo.src}
+      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)}
+    />
+  );
+  return (
+    <div
+      data-slot="tweet-card-media"
+      className={cn("grid w-full gap-2", photos.length > 1 && "grid-cols-2")}
+    >
+      {photos.map((photo, index) =>
+        image(photo, index === 0 && photos.length === 3 ? "row-span-2" : undefined),
+      )}
+    </div>
+  );
+}
+
+const METRICS: { key: keyof TweetCardMetrics; label: string; path: string }[] = [
+  {
+    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. */
+export function TweetCard({
+  className,
+  author,
+  text,
+  media,
+  timestamp,
+  metrics,
+  href,
+  userInfoPosition = "bottom",
+  avatarShape,
+  locale,
+  linkLabel = "View post on X",
+  id,
+  ...props
+}: TweetCardProps) {
+  const uid = useId();
+  const nameId = `${id ?? uid}-author`;
+  const date = timestamp === undefined ? undefined : new Date(timestamp);
+  const validDate = date && !Number.isNaN(date.getTime()) ? date : undefined;
+  const count = new Intl.NumberFormat(locale, { notation: "compact" });
+  const shown = METRICS.filter(({ key }) => metrics?.[key] !== undefined);
+
+  const userInfo = (
+    <div data-slot="tweet-card-author" className="flex items-center gap-2">
+      <a
+        href={author.href ?? `https://x.com/${author.handle}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        tabIndex={-1}
+        aria-hidden="true"
+        className="shrink-0"
+      >
+        <Avatar className={tweetCardAvatarVariants({ avatarShape })}>
+          {author.avatar ? <AvatarImage src={author.avatar} alt="" /> : null}
+          <AvatarFallback className="rounded-[inherit]">{initials(author.name)}</AvatarFallback>
+        </Avatar>
+      </a>
+      <div className="min-w-0">
+        <p className="flex items-center gap-1 text-sm font-semibold tracking-tight">
+          <a
+            id={nameId}
+            href={author.href ?? `https://x.com/${author.handle}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn("truncate rounded-sm hover:underline", focusRing)}
+          >
+            {author.name}
+          </a>
+          {author.verified ? (
+            <>
+              <VerifiedBadge />
+              <span className="sr-only">Verified account</span>
+            </>
+          ) : null}
+        </p>
+        <p className="text-xs text-muted-foreground">@{truncate(author.handle, 16)}</p>
+      </div>
+    </div>
+  );
+
+  return (
+    <article
+      id={id}
+      data-slot="tweet-card"
+      aria-labelledby={nameId}
+      className={cn(tweetCardVariants(), className)}
+      {...props}
+    >
+      {userInfoPosition === "top" ? userInfo : null}
+      <blockquote
+        data-slot="tweet-card-text"
+        cite={href}
+        className="text-sm tracking-tight text-balance whitespace-pre-line"
+      >
+        {typeof text === "string" ? linkify(text) : text}
+      </blockquote>
+      {media && media.length > 0 ? <MediaGrid media={media} /> : null}
+      {validDate || shown.length > 0 ? (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground">
+          {validDate ? (
+            <time dateTime={validDate.toISOString()}>
+              {validDate.toLocaleDateString(locale, {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </time>
+          ) : null}
+          {shown.length > 0 ? (
+            <ul data-slot="tweet-card-metrics" className="flex items-center gap-4">
+              {shown.map(({ key, label, path }) => (
+                <li key={key} className="flex items-center gap-1">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                    className="size-3.5"
+                  >
+                    <path d={path} />
+                  </svg>
+                  <span aria-hidden="true">{count.format(metrics?.[key] ?? 0)}</span>
+                  <span className="sr-only">{`${String(metrics?.[key] ?? 0)} ${label}`}</span>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+      {userInfoPosition === "bottom" ? userInfo : null}
+      {href ? (
+        <a
+          href={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,
+          )}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            className="size-4"
+          >
+            <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" />
+          </svg>
+        </a>
+      ) : null}
+    </article>
+  );
+}
+
+/** Placeholder while a post loads — the source's TweetSkeleton. */
+export function TweetCardSkeleton({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <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}
+    >
+      <div className="flex gap-2">
+        <Skeleton className="size-10 shrink-0 rounded-full" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <Skeleton className="h-20 w-full" />
+    </div>
+  );
+}
+
+export { tweetCardAvatarVariants, tweetCardVariants };

package/src/components/typewriter-text/index.ts

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

package/src/components/typewriter-text/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export 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.",
+});

package/src/components/typewriter-text/typewriter-text.tsx

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

package/src/components/uptime-matrix/index.ts

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

package/src/components/uptime-matrix/meta.ts

@@ -0,0 +1,20 @@
+import { defineMeta } from "@/registry/schema";
+
+export 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.",
+});