@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/ai/message-actions/message-actions.js

@@ -0,0 +1,72 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { IconAction } from "../internal/icon-action.js";
+import { useCopy } from "../internal/use-copy.js";
+function MessageActions({
+  text,
+  onCopy,
+  onRegenerate,
+  onFeedback,
+  feedback: feedbackProp,
+  defaultFeedback = null,
+  className,
+  ...props
+}) {
+  const { copied, copy } = useCopy();
+  const [state, setState] = useState(defaultFeedback);
+  const feedback = feedbackProp === void 0 ? state : feedbackProp;
+  const choose = (value) => {
+    const next = feedback === value ? null : value;
+    if (feedbackProp === void 0) setState(next);
+    onFeedback?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Acciones del mensaje",
+      className: cn("flex items-center gap-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconAction,
+          {
+            label: copied ? "Mensaje copiado" : "Copiar mensaje",
+            onClick: () => {
+              copy(text);
+              onCopy?.(text);
+            },
+            children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
+          }
+        ),
+        onRegenerate ? /* @__PURE__ */ jsx(IconAction, { label: "Regenerar respuesta", onClick: onRegenerate, children: /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": true }) }) : null,
+        onFeedback ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            IconAction,
+            {
+              label: "Me gusta",
+              "aria-pressed": feedback === "like",
+              onClick: () => choose("like"),
+              children: /* @__PURE__ */ jsx(ThumbsUp, { "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconAction,
+            {
+              label: "No me gusta",
+              "aria-pressed": feedback === "dislike",
+              onClick: () => choose("dislike"),
+              children: /* @__PURE__ */ jsx(ThumbsDown, { "aria-hidden": true })
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  MessageActions
+};

package/dist/ai/prompt-input/index.d.ts

@@ -0,0 +1,2 @@
+export { shouldSubmit } from "./keys.js";
+export * from "./prompt-input.js";

package/dist/ai/prompt-input/index.js

@@ -0,0 +1,5 @@
+import { shouldSubmit } from "./keys.js";
+export * from "./prompt-input.js";
+export {
+  shouldSubmit
+};

package/dist/ai/prompt-input/keys.d.ts

@@ -0,0 +1,8 @@
+export interface SubmitKeyEvent {
+    key: string;
+    shiftKey: boolean;
+    /** True while an IME composition is open (Enter confirms the composition, not the message). */
+    isComposing: boolean;
+}
+/** Enter submits; Shift+Enter inserts a newline; IME composition never submits. */
+export declare function shouldSubmit(event: SubmitKeyEvent): boolean;

package/dist/ai/prompt-input/keys.js

@@ -0,0 +1,6 @@
+function shouldSubmit(event) {
+  return event.key === "Enter" && !event.shiftKey && !event.isComposing;
+}
+export {
+  shouldSubmit
+};

package/dist/ai/prompt-input/prompt-input.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface PromptInputProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called with the trimmed text on Enter or send. Never called when empty. */
+    onSubmit?: (value: string) => void;
+    /** While true the send button becomes a stop button. */
+    streaming?: boolean;
+    onStop?: () => void;
+    placeholder?: string;
+    /** Accessible name of the textarea. */
+    label?: string;
+    disabled?: boolean;
+    /** Rows after which the textarea scrolls instead of growing. */
+    maxRows?: number;
+    /** Row above the text (Attachment chips). */
+    attachments?: ReactNode;
+    /** Left of the send button (attach button, model picker…). */
+    actions?: ReactNode;
+    /** Hint line under the field. */
+    hint?: ReactNode;
+    className?: string;
+}
+/**
+ * Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot
+ * and a stop button while a response streams.
+ */
+export declare function PromptInput({ value: valueProp, defaultValue, onValueChange, onSubmit, streaming, onStop, placeholder, label, disabled, maxRows, attachments, actions, hint, className, }: PromptInputProps): import("react").JSX.Element;

package/dist/ai/prompt-input/prompt-input.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUp, Square } from "lucide-react";
+import {
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/cn.js";
+import { shouldSubmit } from "./keys.js";
+function PromptInput({
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSubmit,
+  streaming,
+  onStop,
+  placeholder = "Escribe un mensaje\u2026",
+  label = "Mensaje",
+  disabled,
+  maxRows = 6,
+  attachments,
+  actions,
+  hint,
+  className
+}) {
+  const [state, setState] = useState(defaultValue);
+  const value = valueProp ?? state;
+  const area = useRef(null);
+  useLayoutEffect(() => {
+    const el = area.current;
+    if (!el) return;
+    void value;
+    el.style.height = "auto";
+    const line = Number.parseFloat(getComputedStyle(el).lineHeight) || 20;
+    const max = line * maxRows;
+    el.style.height = `${Math.min(el.scrollHeight, max)}px`;
+    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
+  }, [value, maxRows]);
+  const set = (next) => {
+    if (valueProp === void 0) setState(next);
+    onValueChange?.(next);
+  };
+  const submit = () => {
+    const text = value.trim();
+    if (!text || disabled || streaming) return;
+    onSubmit?.(text);
+    set("");
+  };
+  const onKeyDown = (event) => {
+    if (shouldSubmit({
+      key: event.key,
+      shiftKey: event.shiftKey,
+      isComposing: event.nativeEvent.isComposing
+    })) {
+      event.preventDefault();
+      submit();
+    }
+  };
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    if (streaming) onStop?.();
+    else submit();
+  };
+  const canSend = value.trim().length > 0 && !disabled;
+  return /* @__PURE__ */ jsxs("form", { onSubmit: onFormSubmit, className: cn("@container/prompt grid min-w-0 gap-1", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-density-sm rounded-card bg-surface-control p-2 text-ink border-control shadow-control focus-within:focus-ring", children: [
+      attachments ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-density-sm", children: attachments }) : null,
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: area,
+          rows: 1,
+          value,
+          disabled,
+          "aria-label": label,
+          placeholder,
+          onChange: (event) => set(event.target.value),
+          onKeyDown,
+          className: "block max-h-none w-full min-w-0 resize-none bg-transparent px-1 py-1 text-body leading-normal text-ink outline-none placeholder:text-ink-3 disabled:cursor-not-allowed"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-density-sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-density-sm", children: actions }),
+        streaming ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            "aria-label": "Detener respuesta",
+            className: "inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-ink text-bg pressable focus-visible:focus-ring",
+            children: /* @__PURE__ */ jsx(Square, { "aria-hidden": true, className: "size-3.5 fill-current" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            "aria-label": "Enviar mensaje",
+            disabled: !canSend,
+            className: "inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-accent text-on-accent pressable focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-45",
+            children: /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": true, className: "size-4" })
+          }
+        )
+      ] })
+    ] }),
+    hint ? /* @__PURE__ */ jsx("p", { className: "px-1 text-meta text-ink-3", children: hint }) : null
+  ] });
+}
+export {
+  PromptInput
+};

package/dist/ai/prompt-suggestion/index.d.ts

@@ -0,0 +1 @@
+export * from "./prompt-suggestion.js";

package/dist/ai/prompt-suggestion/index.js

@@ -0,0 +1 @@
+export * from "./prompt-suggestion.js";

package/dist/ai/prompt-suggestion/prompt-suggestion.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef } from "react";
+export interface PromptSuggestionProps extends Omit<ComponentPropsWithoutRef<"button">, "onSelect" | "children"> {
+    /** Receives the suggestion text when pressed (the visible label is the text). */
+    onSelect?: (text: string) => void;
+    children: string;
+}
+/** Chip with a suggested prompt. Pressing it hands the text to `onSelect`. */
+export declare function PromptSuggestion({ onSelect, children, className, onClick, ...props }: PromptSuggestionProps): import("react").JSX.Element;
+export interface PromptSuggestionListProps extends ComponentPropsWithoutRef<"fieldset"> {
+    label?: string;
+}
+/** Wrapping group of suggestion chips. */
+export declare function PromptSuggestionList({ label, className, ...props }: PromptSuggestionListProps): import("react").JSX.Element;

package/dist/ai/prompt-suggestion/prompt-suggestion.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function PromptSuggestion({
+  onSelect,
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: (event) => {
+        onClick?.(event);
+        onSelect?.(children);
+      },
+      className: cn(
+        "inline-flex h-control-sm min-w-0 max-w-full cursor-pointer items-center rounded-button bg-surface-control px-3 text-meta text-ink-2 border-control shadow-control pressable hover:bg-surface-2 hover:text-ink focus-visible:focus-ring",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "truncate", children })
+    }
+  );
+}
+function PromptSuggestionList({
+  label = "Sugerencias",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "aria-label": label,
+      className: cn("@container/suggest flex min-w-0 flex-wrap gap-density-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  PromptSuggestion,
+  PromptSuggestionList
+};

package/dist/ai/source/index.d.ts

@@ -0,0 +1 @@
+export * from "./source.js";

package/dist/ai/source/index.js

@@ -0,0 +1 @@
+export * from "./source.js";

package/dist/ai/source/source.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from "react";
+export interface SourceProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "title"> {
+    /** Citation number shown in the chip. */
+    index?: number;
+    title: string;
+    /** Only http(s) and mailto URLs are linked; anything else renders a non-clickable chip. */
+    url: string;
+    /** Short excerpt shown in the hover preview. */
+    snippet?: string;
+}
+/** Citation chip with a hover/focus preview of the source (title, host and excerpt). */
+export declare function Source({ index, title, url, snippet, className, ...props }: SourceProps): import("react").JSX.Element;

package/dist/ai/source/source.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from "../../overlays/hover-card/hover-card.js";
+import { cn } from "../../utils/cn.js";
+import { safeHref } from "../markdown/parse.js";
+function hostOf(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+function Source({ index, title, url, snippet, className, ...props }) {
+  const href = safeHref(url);
+  const host = hostOf(url);
+  const chipClass = cn(
+    "inline-flex h-control-sm min-w-0 max-w-full items-center gap-1.5 rounded-badge bg-surface-control px-2 text-meta text-ink-2 no-underline border-control shadow-control pressable hover:text-ink focus-visible:focus-ring",
+    className
+  );
+  const chip = /* @__PURE__ */ jsxs(Fragment, { children: [
+    index != null ? /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center rounded-badge bg-accent-soft text-[10px] font-bold text-accent-ink", children: index }) : null,
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: host })
+  ] });
+  return /* @__PURE__ */ jsxs(HoverCard, { children: [
+    /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer nofollow",
+        className: chipClass,
+        ...props,
+        children: chip
+      }
+    ) : /* @__PURE__ */ jsx("button", { type: "button", className: chipClass, children: chip }) }),
+    /* @__PURE__ */ jsxs(HoverCardContent, { className: "@container/source w-72 max-w-[calc(100vw-1rem)] rounded-popover bg-surface-overlay p-3 text-ink shadow-overlay border-control surface-overlay", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-meta text-ink-3", children: host }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-body font-semibold", children: title }),
+      snippet ? /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-4 text-meta text-ink-2", children: snippet }) : null
+    ] })
+  ] });
+}
+export {
+  Source
+};

package/dist/ai/text-shimmer/index.d.ts

@@ -0,0 +1 @@
+export * from "./text-shimmer.js";

package/dist/ai/text-shimmer/index.js

@@ -0,0 +1 @@
+export * from "./text-shimmer.js";

package/dist/ai/text-shimmer/text-shimmer.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, ReactNode } from "react";
+export interface TextShimmerProps {
+    children: ReactNode;
+    /** Element to render. */
+    as?: ElementType;
+    /** Seconds for one sweep. */
+    duration?: number;
+    className?: string;
+}
+/** Text with a light sweep, used for "thinking…" labels. Static with reduced motion. */
+export declare function TextShimmer({ children, as: Comp, duration, className, }: TextShimmerProps): import("react").JSX.Element;

package/dist/ai/text-shimmer/text-shimmer.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import { AiKeyframes } from "../internal/keyframes.js";
+function TextShimmer({
+  children,
+  as: Comp = "span",
+  duration = 2,
+  className
+}) {
+  const reduced = usePrefersReducedMotion();
+  const style = reduced ? void 0 : {
+    backgroundImage: "linear-gradient(100deg, var(--color-ink-3) 35%, var(--color-ink) 50%, var(--color-ink-3) 65%)",
+    backgroundSize: "250% 100%",
+    animation: `ui-ai-shimmer ${duration}s linear infinite`,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    color: "transparent"
+  };
+  return /* @__PURE__ */ jsxs(Comp, { className: cn("inline-block text-ink-3", className), style, children: [
+    /* @__PURE__ */ jsx(AiKeyframes, {}),
+    children
+  ] });
+}
+export {
+  TextShimmer
+};

package/dist/ai/tool-call/index.d.ts

@@ -0,0 +1 @@
+export * from "./tool-call.js";

package/dist/ai/tool-call/index.js

@@ -0,0 +1 @@
+export * from "./tool-call.js";

package/dist/ai/tool-call/tool-call.d.ts

@@ -0,0 +1,18 @@
+export type ToolCallStatus = "pending" | "running" | "done" | "error";
+export interface ToolCallProps {
+    /** Tool identifier, e.g. `buscar_turnos`. */
+    name: string;
+    status?: ToolCallStatus;
+    /** Arguments sent to the tool; shown as formatted JSON. */
+    args?: unknown;
+    /** Result returned by the tool; shown as formatted JSON. */
+    result?: unknown;
+    /** Error text when `status` is `error`. */
+    error?: string;
+    /** Pre-formatted duration, e.g. `1,2 s`. */
+    duration?: string;
+    defaultOpen?: boolean;
+    className?: string;
+}
+/** Collapsible tool invocation with status, JSON arguments and JSON result. */
+export declare function ToolCall({ name, status, args, result, error, duration, defaultOpen, className, }: ToolCallProps): import("react").JSX.Element;

package/dist/ai/tool-call/tool-call.js

@@ -0,0 +1,84 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, CircleAlert, Clock, LoaderCircle, Wrench } from "lucide-react";
+import { useMemo } from "react";
+import { cn } from "../../utils/cn.js";
+import { CodeBlock } from "../code-block/code-block.js";
+import { Disclosure } from "../internal/disclosure.js";
+const STATUS = {
+  pending: { label: "En espera", tone: "text-ink-3" },
+  running: { label: "Ejecutando", tone: "text-accent-ink" },
+  done: { label: "Listo", tone: "text-success" },
+  error: { label: "Error", tone: "text-danger" }
+};
+function StatusIcon({ status }) {
+  const cls = "size-3.5 shrink-0";
+  if (status === "running") return /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": true, className: cn(cls, "animate-spin") });
+  if (status === "done") return /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: cls });
+  if (status === "error") return /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": true, className: cls });
+  return /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: cls });
+}
+const pretty = (value) => typeof value === "string" ? value : JSON.stringify(value, null, 2);
+function ToolCall({
+  name,
+  status = "pending",
+  args,
+  result,
+  error,
+  duration,
+  defaultOpen = false,
+  className
+}) {
+  const info = STATUS[status];
+  const argsText = useMemo(() => args === void 0 ? null : pretty(args), [args]);
+  const resultText = useMemo(() => result === void 0 ? null : pretty(result), [result]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "@container/tool min-w-0 rounded-card bg-surface-card p-2 text-ink border-card shadow-card",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        Disclosure,
+        {
+          defaultOpen,
+          header: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Wrench, { "aria-hidden": true, className: "size-3.5 shrink-0 text-ink-3" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-meta font-medium", children: name }),
+            /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex shrink-0 items-center gap-1 text-meta", info.tone), children: [
+              /* @__PURE__ */ jsx(StatusIcon, { status }),
+              /* @__PURE__ */ jsx("span", { className: "hidden @xs/tool:inline", children: info.label }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only @xs/tool:hidden", children: info.label }),
+              duration ? /* @__PURE__ */ jsxs("span", { className: "hidden text-ink-3 @sm/tool:inline", children: [
+                "\xB7 ",
+                duration
+              ] }) : null
+            ] })
+          ] }),
+          panelClassName: "grid gap-density-sm",
+          children: /* @__PURE__ */ jsxs("div", { className: "grid gap-density-sm pt-density-sm", children: [
+            argsText ? /* @__PURE__ */ jsxs("section", { "aria-label": "Argumentos", className: "grid gap-1", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-meta font-semibold text-ink-2", children: "Argumentos" }),
+              /* @__PURE__ */ jsx(CodeBlock, { code: argsText, language: "json" })
+            ] }) : null,
+            status === "error" && error ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                role: "alert",
+                className: "rounded-badge bg-danger-soft px-2 py-1 text-meta text-danger",
+                children: error
+              }
+            ) : null,
+            resultText ? /* @__PURE__ */ jsxs("section", { "aria-label": "Resultado", className: "grid gap-1", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-meta font-semibold text-ink-2", children: "Resultado" }),
+              /* @__PURE__ */ jsx(CodeBlock, { code: resultText, language: "json" })
+            ] }) : null
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  ToolCall
+};

package/dist/atoms/avatar/avatar.d.ts

@@ -0,0 +1,11 @@
+export type AvatarSize = "md" | "lg";
+export interface AvatarProps {
+    /** Full name: used for the initials fallback and as the accessible name. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+    /** Fills the avatar with the accent color (e.g. the current user). */
+    highlighted?: boolean;
+    className?: string;
+}
+export declare function Avatar({ name, src, size, highlighted, className }: AvatarProps): import("react").JSX.Element;

package/dist/atoms/avatar/avatar.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../utils/cn.js";
+function initials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 1) {
+    return (words[0]?.slice(0, 2) ?? "").toUpperCase();
+  }
+  const first = words[0]?.at(0) ?? "";
+  const last = words.at(-1)?.at(0) ?? "";
+  return `${first}${last}`.toUpperCase();
+}
+const sizeClasses = {
+  md: "size-[26px] text-[10px]",
+  lg: "size-8 text-[11px]"
+};
+function Avatar({ name, src, size = "md", highlighted, className }) {
+  return /* @__PURE__ */ jsxs(
+    AvatarPrimitive.Root,
+    {
+      role: "img",
+      "aria-label": name,
+      className: cn(
+        "inline-grid shrink-0 place-items-center overflow-hidden rounded-avatar font-bold tracking-[.02em]",
+        highlighted ? "bg-accent text-on-accent" : "bg-sunken text-ink-2",
+        sizeClasses[size],
+        className
+      ),
+      children: [
+        src ? /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt: "" }) : null,
+        /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { "aria-hidden": "true", delayMs: src ? 400 : void 0, children: initials(name) })
+      ]
+    }
+  );
+}
+export {
+  Avatar
+};

package/dist/atoms/avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarSize } from "./avatar.js";

package/dist/atoms/avatar/index.js

@@ -0,0 +1,4 @@
+import { Avatar } from "./avatar.js";
+export {
+  Avatar
+};

package/dist/atoms/avatar-group/avatar-group.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export interface AvatarGroupProps {
+    children?: ReactNode;
+    className?: string;
+}
+/** Stacked, overlapping avatars separated by a surface-colored ring. */
+export declare function AvatarGroup({ children, className }: AvatarGroupProps): import("react").JSX.Element;

package/dist/atoms/avatar-group/avatar-group.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function AvatarGroup({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex [&>*+*]:-ml-1.5 [&>*]:shadow-[0_0_0_2px_var(--surface)]", className), children });
+}
+export {
+  AvatarGroup
+};

package/dist/atoms/avatar-group/index.d.ts

@@ -0,0 +1 @@
+export { AvatarGroup, type AvatarGroupProps } from "./avatar-group.js";

package/dist/atoms/avatar-group/index.js

@@ -0,0 +1,4 @@
+import { AvatarGroup } from "./avatar-group.js";
+export {
+  AvatarGroup
+};

package/dist/atoms/big-date/big-date.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type BigDateSize = "normal" | "compact";
+export interface BigDateProps extends ComponentPropsWithoutRef<"div"> {
+    size?: BigDateSize;
+}
+/** Prominent date or number, typically at the top of a card. */
+export declare function BigDate({ size, className, ...props }: BigDateProps): import("react").JSX.Element;

package/dist/atoms/big-date/big-date.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const sizeClasses = {
+  normal: "text-[30px]",
+  compact: "text-[22px]"
+};
+function BigDate({ size = "normal", className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("font-[720] leading-[1.1] tracking-[-0.025em]", sizeClasses[size], className),
+      ...props
+    }
+  );
+}
+export {
+  BigDate
+};

package/dist/atoms/big-date/index.d.ts

@@ -0,0 +1 @@
+export { BigDate, type BigDateProps, type BigDateSize } from "./big-date.js";