@calliopelabs/ui 0.0.0-stage → 0.1.0

package/dist/states/ErrorState.d.ts

@@ -0,0 +1,23 @@
+export interface ErrorStateProps {
+    /** What failed ("Could not load runs"). Defaults to "Something went wrong". */
+    title?: string;
+    /** The error, or its message. Without one, a generic line. */
+    error?: string | {
+        message: string;
+    } | null;
+    onRetry?: () => void;
+    retryLabel?: string;
+    /**
+     * `inline` is a callout inside a page, for one query that failed. `page` is
+     * the whole surface, for an error boundary: centred, with the digest a
+     * report can be traced by, and a way out when retrying fails the same way.
+     */
+    variant?: "inline" | "page";
+    /** The server's error digest, shown on the page variant. */
+    digest?: string;
+    /** A known-good page to escape to, on the page variant. */
+    homeHref?: string;
+    homeLabel?: string;
+    className?: string;
+}
+export declare function ErrorState({ title, error, onRetry, retryLabel, variant, digest, homeHref, homeLabel, className, }: ErrorStateProps): import("react").JSX.Element;

package/dist/states/ErrorState.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon, TriangleAlertIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+export function ErrorState({ title, error, onRetry, retryLabel, variant = "inline", digest, homeHref, homeLabel, className, }) {
+    const { Link, messages } = useUI();
+    const message = (typeof error === "string" ? error : error?.message) || messages.states.unexpected;
+    const heading = title ?? messages.states.errorTitle;
+    const retry = onRetry && (_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onRetry, children: retryLabel ?? messages.states.retry }));
+    if (variant === "page") {
+        return (_jsxs("div", { role: "alert", "data-slot": "error-state", className: cn("flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", className), children: [_jsx("div", { "aria-hidden": true, className: "rounded-full bg-danger-bg p-4 text-danger", children: _jsx(CircleAlertIcon, { className: "size-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("p", { className: "mt-1 max-w-sm text-sm [overflow-wrap:anywhere] text-muted-foreground", children: message }), digest && (_jsx("p", { className: "mt-2 font-mono text-xs text-muted-foreground", children: messages.states.errorId(digest) }))] }), (retry || homeHref) && (_jsxs("div", { className: "flex items-center gap-2", children: [retry, homeHref && homeLabel && (_jsx(Button, { asChild: true, size: "sm", variant: "ghost", children: _jsx(Link, { href: homeHref, children: homeLabel }) }))] }))] }));
+    }
+    return (_jsxs("div", { role: "alert", "data-slot": "error-state", className: cn("flex min-w-0 flex-col gap-3 rounded-lg border border-danger-border bg-danger/5 p-4", className), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(TriangleAlertIcon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-danger" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-danger-fg", children: heading }), _jsx("p", { className: "mt-1 text-xs [overflow-wrap:anywhere] text-muted-foreground", children: message })] })] }), retry && _jsx("div", { children: retry })] }));
+}

package/dist/states/LoadingState.d.ts

@@ -0,0 +1,14 @@
+export interface LoadingStateProps {
+    /** Announced to screen readers ("Loading runs"). Defaults to "Loading". */
+    label?: string;
+    /**
+     * `rows` stands in for a list: hairline rows in one panel. `page` stands in
+     * for a whole route: a row of stat tiles over two panels. Tables draw their
+     * own skeleton rows inside the real table, sized from the columns.
+     */
+    variant?: "rows" | "page";
+    rows?: number;
+    className?: string;
+}
+/** The loading placeholder: the geometry of what is coming, so nothing jumps when it lands. */
+export declare function LoadingState({ label, variant, rows, className }: LoadingStateProps): import("react").JSX.Element;

package/dist/states/LoadingState.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/Skeleton.js";
+import { useUI } from "../provider/UIProvider.js";
+/** The loading placeholder: the geometry of what is coming, so nothing jumps when it lands. */
+export function LoadingState({ label, variant = "rows", rows = 5, className }) {
+    const { messages } = useUI();
+    const status = (_jsx("p", { role: "status", className: "sr-only", children: label ?? messages.states.loading }));
+    if (variant === "page") {
+        return (_jsxs("div", { "data-slot": "loading-state", "aria-busy": true, className: cn("flex min-w-0 flex-1 flex-col gap-6", className), children: [status, _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }, (_, i) => (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-8 w-32" })] }, i))) }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4 lg:col-span-2", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx(Skeleton, { className: "h-60 w-full" })] }), _jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [_jsx(Skeleton, { className: "h-5 w-28" }), _jsx(Skeleton, { className: "h-60 w-full" })] })] })] }));
+    }
+    return (_jsxs("div", { "data-slot": "loading-state", "aria-busy": true, className: cn("min-w-0 overflow-hidden rounded-lg border", className), children: [status, Array.from({ length: rows }, (_, i) => (_jsxs("div", { className: "flex items-center gap-3 border-b px-(--row-pad-x) py-(--row-pad-y) last:border-b-0", children: [_jsx(Skeleton, { className: "size-4 shrink-0" }), _jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-4 w-20 shrink-0" })] }, i)))] }));
+}

package/dist/status/StatusBadge.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import { type StatusTone } from "./tones.js";
+export interface StatusBadgeProps extends Omit<React.ComponentProps<"span">, "children"> {
+    tone: StatusTone;
+    /** The status in words ("running", "failed"). Colour is never the only carrier. */
+    children: React.ReactNode;
+    /** In flight (deploying, running): the dot pulses; the label holds still, so it stays readable. */
+    pulse?: boolean;
+    /** Strike the label through, for superseded states. */
+    struck?: boolean;
+}
+/**
+ * A status pill: mono label, tinted fill, glowing dot (the admin badge
+ * recipe). Apps map their own states onto the five tones, once, in a table:
+ *
+ *   const DEPLOYMENT_TONE = { running: "ok", failed: "error", deploying: "info", ... };
+ *   <StatusBadge tone={DEPLOYMENT_TONE[d.status]} pulse={d.status === "deploying"}>{label}</StatusBadge>
+ */
+export declare function StatusBadge({ tone, children, pulse, struck, className, ...props }: StatusBadgeProps): React.JSX.Element;

package/dist/status/StatusBadge.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { IN_FLIGHT, PILL_TONE } from "./tones.js";
+/**
+ * A status pill: mono label, tinted fill, glowing dot (the admin badge
+ * recipe). Apps map their own states onto the five tones, once, in a table:
+ *
+ *   const DEPLOYMENT_TONE = { running: "ok", failed: "error", deploying: "info", ... };
+ *   <StatusBadge tone={DEPLOYMENT_TONE[d.status]} pulse={d.status === "deploying"}>{label}</StatusBadge>
+ */
+export function StatusBadge({ tone, children, pulse = false, struck = false, className, ...props }) {
+    return (_jsxs("span", { "data-slot": "status-badge", "data-tone": tone, className: cn("inline-flex h-5 w-fit shrink-0 items-center gap-1.5 overflow-hidden rounded-full border px-2 font-mono text-xs font-semibold whitespace-nowrap", PILL_TONE[tone], className), ...props, children: [_jsx("span", { "aria-hidden": true, className: cn("size-1.5 shrink-0 rounded-full bg-current shadow-[0_0_8px_currentColor]", pulse && IN_FLIGHT) }), _jsx("span", { className: cn("truncate", struck && "line-through"), children: children })] }));
+}

package/dist/status/StatusDot.d.ts

@@ -0,0 +1,14 @@
+import { type StatusTone } from "./tones.js";
+export interface StatusDotProps {
+    tone: StatusTone;
+    /** In flight (deploying, running): the dot pulses. */
+    pulse?: boolean;
+    /**
+     * Read by screen readers when the dot stands alone (a tree row, a table
+     * cell with no text). Leave it out when a visible label sits beside it.
+     */
+    label?: string;
+    className?: string;
+}
+/** A status mark. Its colour is a status token, so it means the same thing whatever the accent. */
+export declare function StatusDot({ tone, pulse, label, className }: StatusDotProps): import("react").JSX.Element;

package/dist/status/StatusDot.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { DOT_TONE, IN_FLIGHT } from "./tones.js";
+/** A status mark. Its colour is a status token, so it means the same thing whatever the accent. */
+export function StatusDot({ tone, pulse = false, label, className }) {
+    return (_jsxs("span", { className: cn("inline-flex shrink-0 items-center", className), "data-tone": tone, children: [_jsx("span", { "aria-hidden": true, className: cn("inline-block size-2 rounded-full shadow-[0_0_0_2px_var(--background)]", DOT_TONE[tone], pulse && IN_FLIGHT) }), label && _jsx("span", { className: "sr-only", children: label })] }));
+}

package/dist/status/tones.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The one status colour map (Astrolift #2126). Status is semantic and never
+ * follows the accent: with a copper or ice accent a healthy deployment is
+ * still lime, a failure still red. Every tone here is a status token.
+ */
+export type StatusTone = "ok" | "warn" | "error" | "info" | "muted";
+export declare const STATUS_TONES: readonly StatusTone[];
+/** The status token each tone paints. `muted` has none: it is the muted foreground. */
+export declare const TONE_TOKEN: Record<StatusTone, "success" | "warning" | "danger" | "info" | null>;
+/** A dot: solid status colour with a soft halo, the one glow the brand permits besides focus. */
+export declare const DOT_TONE: Record<StatusTone, string>;
+/** How much of the status colour tints a pill's fill (`bg-success/15`). */
+export declare const PILL_TINT = 0.15;
+/** A pill: tinted fill, readable text, tinted hairline. */
+export declare const PILL_TONE: Record<StatusTone, string>;
+/** In-flight states pulse; nothing else moves. Reduced motion holds it still. */
+export declare const IN_FLIGHT = "animate-pulse motion-reduce:animate-none";

package/dist/status/tones.js

@@ -0,0 +1,29 @@
+export const STATUS_TONES = ["ok", "warn", "error", "info", "muted"];
+/** The status token each tone paints. `muted` has none: it is the muted foreground. */
+export const TONE_TOKEN = {
+    ok: "success",
+    warn: "warning",
+    error: "danger",
+    info: "info",
+    muted: null,
+};
+/** A dot: solid status colour with a soft halo, the one glow the brand permits besides focus. */
+export const DOT_TONE = {
+    ok: "bg-success shadow-success/50",
+    warn: "bg-warning shadow-warning/50",
+    error: "bg-danger shadow-danger/50",
+    info: "bg-info shadow-info/50",
+    muted: "bg-muted-foreground shadow-muted-foreground/40",
+};
+/** How much of the status colour tints a pill's fill (`bg-success/15`). */
+export const PILL_TINT = 0.15;
+/** A pill: tinted fill, readable text, tinted hairline. */
+export const PILL_TONE = {
+    ok: "border-success-border bg-success/15 text-success-fg",
+    warn: "border-warning-border bg-warning/15 text-warning-fg",
+    error: "border-danger-border bg-danger/15 text-danger-fg",
+    info: "border-info-border bg-info/15 text-info-fg",
+    muted: "border-border bg-foreground/5 text-muted-foreground",
+};
+/** In-flight states pulse; nothing else moves. Reduced motion holds it still. */
+export const IN_FLIGHT = "animate-pulse motion-reduce:animate-none";

package/dist/styles/preset.css

@@ -0,0 +1,175 @@
+/*
+ * @calliopelabs/ui Tailwind 4 preset.
+ *
+ *   @import "tailwindcss";
+ *   @import "@calliopelabs/ui/preset.css";
+ *
+ * It brings the theme tokens, maps them onto Tailwind's colour, radius, font,
+ * type and motion scales, points Tailwind at this package's components so
+ * their classes are generated, and sets the family's base layer.
+ */
+@import "./theme.css";
+
+/* The package's own components: their classes are generated with the app's. */
+@source "../";
+
+/* Dark follows the ground, not the OS: `data-mode` on <html> says which. */
+@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface-0: var(--surface-0);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+
+  /* Semantic status: solid base, -fg text on the tint, -bg fill, -border hairline. */
+  --color-success: var(--success);
+  --color-success-fg: var(--success-fg);
+  --color-success-bg: var(--success-bg);
+  --color-success-border: var(--success-border);
+  --color-warning: var(--warning);
+  --color-warning-fg: var(--warning-fg);
+  --color-warning-bg: var(--warning-bg);
+  --color-warning-border: var(--warning-border);
+  --color-info: var(--info);
+  --color-info-fg: var(--info-fg);
+  --color-info-bg: var(--info-bg);
+  --color-info-border: var(--info-border);
+  --color-danger: var(--danger);
+  --color-danger-fg: var(--danger-fg);
+  --color-danger-bg: var(--danger-bg);
+  --color-danger-border: var(--danger-border);
+
+  /* IBM Plex Sans for UI, IBM Plex Mono for anything technical, DM Sans for headings. */
+  --font-sans: var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif;
+  --font-mono:
+    var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-head: var(--font-dm-sans, "DM Sans"), system-ui, sans-serif;
+
+  /* `rounded-lg` is the corners setting itself; clamped so 0px never goes negative. */
+  --radius-sm: max(0px, calc(var(--radius) - 4px));
+  --radius-md: max(0px, calc(var(--radius) - 2px));
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+@theme {
+  /* The micro step below xs, for eyebrows, counts and table heads. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+
+  /* Overlays arrive calmly and leave at once. */
+  --animate-cui-fade-in: cui-fade-in var(--motion-fast) var(--ease-standard);
+  --animate-cui-pop-in: cui-pop-in var(--motion-base) var(--ease-emphasized);
+  --animate-cui-slide-in-right: cui-slide-in-right var(--motion-base) var(--ease-emphasized);
+  --animate-cui-slide-in-left: cui-slide-in-left var(--motion-base) var(--ease-emphasized);
+  --animate-cui-slide-in-bottom: cui-slide-in-bottom var(--motion-base) var(--ease-emphasized);
+  /* A table's rows being replaced: a short bar travelling along the top edge. */
+  --animate-cui-progress: cui-progress 1.4s var(--ease-standard) infinite;
+
+  @keyframes cui-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  /* `transform` composes with the `translate` that centres a dialog. */
+  @keyframes cui-pop-in {
+    from {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+  }
+  @keyframes cui-slide-in-right {
+    from {
+      transform: translateX(1.5rem);
+      opacity: 0;
+    }
+  }
+  @keyframes cui-slide-in-left {
+    from {
+      transform: translateX(-1.5rem);
+      opacity: 0;
+    }
+  }
+  @keyframes cui-progress {
+    from {
+      translate: -100% 0;
+    }
+    to {
+      translate: 300% 0;
+    }
+  }
+  @keyframes cui-slide-in-bottom {
+    from {
+      transform: translateY(1.5rem);
+      opacity: 0;
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply font-head;
+  }
+
+  /* Motion is never the only carrier of meaning; with reduced motion it stops. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}