@almanaclabs/blaze-ui 0.9.0 → 0.11.0

package/dist/components/face-stack-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './face-stack-button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/face-stack-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/face-stack-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/components/goal-card/goal-card.d.ts

@@ -0,0 +1,51 @@
+import { Badge } from '../badge';
+import { Card } from '../card';
+import * as React from 'react';
+export type PaceStatus = 'behind' | 'on-track' | 'ahead';
+/** Under 85% of the pace a goal needs is behind; over 115% is ahead. */
+declare function paceStatusOf(value: number, target: number): PaceStatus;
+export interface PaceBadgeProps extends Omit<React.ComponentProps<typeof Badge>, 'variant'> {
+    status: PaceStatus;
+}
+/** Behind, On track or Ahead, in the status's color. Children replace the label. */
+declare function PaceBadge({ status, size, children, ...props }: PaceBadgeProps): React.JSX.Element;
+export interface PaceMeterProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Where things stand now, such as the last 7 days. */
+    value: number;
+    /** The pace the goal needs. Drawn as the tick. */
+    target: number;
+    /** The end of the bar. Defaults to half again past the target, or the value if higher. */
+    max?: number;
+    /** Colors the fill. Defaults to `paceStatusOf(value, target)`. */
+    status?: PaceStatus;
+    /** Accessible name. Defaults to "value of target". */
+    'aria-label'?: string;
+}
+/** A bar of the current pace against the pace a goal needs; the tick marks the target. */
+declare function PaceMeter({ value, target, max: maxProp, status, className, 'aria-label': ariaLabel, ...props }: PaceMeterProps): React.JSX.Element;
+export interface GoalCardProps extends Omit<React.ComponentProps<typeof Card>, 'children'> {
+    /** What the goal is about, such as a channel or a site. */
+    label: React.ReactNode;
+    /** A 16px mark before the label. */
+    icon?: React.ReactNode;
+    /** Something small after the label, such as a "changed" dot. */
+    indicator?: React.ReactNode;
+    /** The current pace, as a number, for the meter. */
+    value: number;
+    /** The pace the goal needs. */
+    target: number;
+    /** How the value reads. Defaults to the value with thousands separators. */
+    valueLabel?: React.ReactNode;
+    /** The line under the value, such as "new followers last 7 days". */
+    unit?: React.ReactNode;
+    /** The line under the meter. Defaults to "Target {target}". */
+    targetLabel?: React.ReactNode;
+    /** Overrides the status worked out from value and target. */
+    status?: PaceStatus;
+    /** Makes the whole card a button. */
+    onOpen?: () => void;
+}
+/** One goal: its status, the current number, a pace meter and the pace it needs. */
+declare function GoalCard({ label, icon, indicator, value, target, valueLabel, unit, targetLabel, status: statusProp, onOpen, className, onKeyDown, ...props }: GoalCardProps): React.JSX.Element;
+export { GoalCard, PaceBadge, PaceMeter, paceStatusOf };
+//# sourceMappingURL=goal-card.d.ts.map

package/dist/components/goal-card/goal-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../../src/components/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAIxC,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAA;AAExD,wEAAwE;AACxE,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,UAAU,CAI/D;AAqBD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAClC,SAAS,CACV;IACC,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,oFAAoF;AACpF,iBAAS,SAAS,CAAC,EACjB,MAAM,EACN,IAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBAWhB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,CACX;IACC,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAA;IACd,0FAA0F;IAC1F,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kEAAkE;IAClE,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,0FAA0F;AAC1F,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,MAAM,EACN,GAAG,EAAE,OAAO,EACZ,MAAM,EACN,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,cAAc,qBAyBhB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,UAAU,CACX;IACC,2DAA2D;IAC3D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,gEAAgE;IAChE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,oFAAoF;AACpF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,IAAI,EACJ,WAAW,EACX,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,qBAgDf;AAED,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,109 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t } from "../card/card.js";
+import { Badge as n } from "../badge/badge.js";
+import { Progress as r } from "../progress/progress.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/goal-card/goal-card.tsx
+function o(e, t) {
+	return e < t * .85 ? "behind" : e > t * 1.15 ? "ahead" : "on-track";
+}
+var s = {
+	behind: "Behind",
+	"on-track": "On track",
+	ahead: "Ahead"
+}, c = {
+	behind: "warning",
+	"on-track": "success",
+	ahead: "info"
+}, l = {
+	behind: "[&_[data-slot=progress-indicator]]:bg-warning",
+	"on-track": "[&_[data-slot=progress-indicator]]:bg-success",
+	ahead: "[&_[data-slot=progress-indicator]]:bg-primary"
+};
+function u({ status: e, size: t = "md", children: r, ...a }) {
+	return /* @__PURE__ */ i(n, {
+		"data-pace": e,
+		variant: c[e],
+		size: t,
+		...a,
+		children: r ?? s[e]
+	});
+}
+function d({ value: t, target: n, max: s, status: c, className: u, "aria-label": d, ...f }) {
+	let p = s ?? Math.max(n * 1.5, t, 1), m = c ?? o(t, n);
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "pace-meter",
+		"data-pace": m,
+		className: e("relative py-1", u),
+		...f,
+		children: [/* @__PURE__ */ i(r, {
+			value: Math.max(1.5, Math.max(0, t) / p * 100),
+			"aria-label": d ?? `${t} of ${n}`,
+			className: e("[&_[data-slot=progress-track]]:h-2", l[m])
+		}), /* @__PURE__ */ i("span", {
+			"data-slot": "pace-meter-target",
+			"aria-hidden": "true",
+			className: "absolute top-0 h-4 w-0.5 rounded-full bg-foreground",
+			style: { left: `calc(${Math.min(100, n / p * 100)}% - 1px)` }
+		})]
+	});
+}
+function f({ label: n, icon: r, indicator: s, value: c, target: l, valueLabel: f, unit: p, targetLabel: m, status: h, onOpen: g, className: _, onKeyDown: v, ...y }) {
+	let b = h ?? o(c, l), x = !!g;
+	return /* @__PURE__ */ a(t, {
+		"data-slot": "goal-card",
+		"data-pace": b,
+		role: x ? "button" : void 0,
+		tabIndex: x ? 0 : void 0,
+		onClick: g,
+		onKeyDown: (e) => {
+			v?.(e), !(!g || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), g());
+		},
+		className: e("gap-0 p-4", x && "cursor-pointer transition-colors hover:border-ring focus-visible:border-ring focus-visible:outline-none", _),
+		...y,
+		children: [
+			/* @__PURE__ */ a("div", {
+				"data-slot": "goal-card-header",
+				className: "flex items-center gap-2",
+				children: [
+					r ? /* @__PURE__ */ i("span", {
+						className: "flex flex-none [&>svg]:size-4",
+						children: r
+					}) : null,
+					/* @__PURE__ */ i("span", {
+						className: "type-label min-w-0 truncate",
+						children: n
+					}),
+					s
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ i(u, { status: b })
+			}),
+			/* @__PURE__ */ i("p", {
+				className: "type-metric mt-3",
+				children: f ?? c.toLocaleString("en-US")
+			}),
+			p ? /* @__PURE__ */ i("p", {
+				className: "type-meta text-muted-foreground",
+				children: p
+			}) : null,
+			/* @__PURE__ */ i("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ i(d, {
+					value: c,
+					target: l,
+					status: b
+				})
+			}),
+			/* @__PURE__ */ i("p", {
+				className: "type-meta mt-1.5 text-muted-foreground",
+				children: m ?? `Target ${l.toLocaleString("en-US")}`
+			})
+		]
+	});
+}
+//#endregion
+export { f as GoalCard, u as PaceBadge, d as PaceMeter, o as paceStatusOf };

package/dist/components/goal-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './goal-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/goal-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/goal-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/components/input-group/input-group.d.ts

@@ -9,7 +9,7 @@ declare const inputGroupVariants: (props?: ({
 type InputGroupProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>;
 declare function InputGroup({ className, size, ...props }: InputGroupProps): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({

package/dist/components/media-thumbnail/index.d.ts

@@ -0,0 +1,2 @@
+export * from './media-thumbnail';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/media-thumbnail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-thumbnail/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/components/media-thumbnail/media-thumbnail.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const mediaThumbnailVariants: (props?: ({
+    shape?: "cover" | "square" | null | undefined;
+    tone?: "blue" | "green" | "violet" | "neutral" | "amber" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type MediaThumbnailProps = Omit<React.ComponentProps<'span'>, 'children'> & VariantProps<typeof mediaThumbnailVariants> & {
+    /** The picture. Without one, the tile shows its tone with `icon`. */
+    src?: string | null;
+    /** Text alternative. Empty by default, since the item's title says what it is. */
+    alt?: string;
+    /** Drawn at 28px in the tone's color when there is no picture. */
+    icon?: React.ReactNode;
+};
+/**
+ * An item's picture, or its category's color with an icon when it has none.
+ * `shape` sets the size and corners; `tone` the color of the empty tile.
+ */
+declare function MediaThumbnail({ src, alt, icon, shape, tone, className, ...props }: MediaThumbnailProps): React.JSX.Element;
+export { MediaThumbnail, mediaThumbnailVariants, type MediaThumbnailProps };
+//# sourceMappingURL=media-thumbnail.d.ts.map

package/dist/components/media-thumbnail/media-thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-thumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/media-thumbnail/media-thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,sBAAsB;;;8EAuB3B,CAAA;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACvE,YAAY,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC5C,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kEAAkE;IAClE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAEH;;;GAGG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,EACH,GAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAkCrB;AAED,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,CAAA"}

package/dist/components/media-thumbnail/media-thumbnail.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/media-thumbnail/media-thumbnail.tsx
+var r = t("flex shrink-0 items-center justify-center overflow-hidden", {
+	variants: {
+		shape: {
+			square: "size-13 rounded-sm",
+			cover: "aspect-video w-full"
+		},
+		tone: {
+			neutral: "bg-surface-subtle text-muted-foreground",
+			blue: "bg-tone-blue-soft text-tone-blue",
+			violet: "bg-tone-violet-soft text-tone-violet",
+			amber: "bg-tone-amber-soft text-tone-amber",
+			green: "bg-tone-green-soft text-tone-green"
+		}
+	},
+	defaultVariants: {
+		shape: "square",
+		tone: "neutral"
+	}
+});
+function i({ src: t, alt: i = "", icon: a, shape: o, tone: s, className: c, ...l }) {
+	return t ? /* @__PURE__ */ n("img", {
+		"data-slot": "media-thumbnail",
+		"data-shape": o ?? "square",
+		src: t,
+		alt: i,
+		className: e(r({ shape: o }), "bg-surface-subtle object-cover", c),
+		...l
+	}) : /* @__PURE__ */ n("span", {
+		"data-slot": "media-thumbnail",
+		"data-shape": o ?? "square",
+		"data-tone": s ?? "neutral",
+		...i ? {
+			role: "img",
+			"aria-label": i
+		} : { "aria-hidden": !0 },
+		className: e(r({
+			shape: o,
+			tone: s
+		}), "[--icon-stroke-width:var(--icon-stroke-32)] [&>svg]:size-7", c),
+		...l,
+		children: a
+	});
+}
+//#endregion
+export { i as MediaThumbnail, r as mediaThumbnailVariants };

package/dist/components/metric-tile/index.d.ts

@@ -0,0 +1,2 @@
+export * from './metric-tile';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/metric-tile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/metric-tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/components/metric-tile/metric-tile.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const metricTileVariants: (props?: ({
+    variant?: "subtle" | "plain" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const metricTileValueVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface MetricTileDelta {
+    /** Which way the number moved. Draws the arrow. */
+    trend: 'up' | 'down';
+    /** Whether the move is good news. Defaults to up being good. */
+    tone?: 'positive' | 'negative';
+    /** The comparison, such as "vs 120 the 7 days before". */
+    label: React.ReactNode;
+}
+export interface MetricTileProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof metricTileVariants>, VariantProps<typeof metricTileValueVariants> {
+    /** What the number counts. With an icon, the label reads as the tile's heading. */
+    label: React.ReactNode;
+    /** A mark before the label, such as a channel's icon on its tint. */
+    icon?: React.ReactNode;
+    /** The number itself, already formatted. */
+    value: React.ReactNode;
+    /** The line right under the value, such as "followers". */
+    unit?: React.ReactNode;
+    /** The change against an earlier period, with an arrow. */
+    delta?: MetricTileDelta;
+    /** A closing line, such as "so far" or "120 a day". */
+    note?: React.ReactNode;
+}
+/** One number with its label, an optional change against before, and a note. */
+declare function MetricTile({ label, icon, value, unit, delta, note, variant, size, className, ...props }: MetricTileProps): React.JSX.Element;
+export { MetricTile, metricTileVariants };
+//# sourceMappingURL=metric-tile.d.ts.map

package/dist/components/metric-tile/metric-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-tile.d.ts","sourceRoot":"","sources":["../../../src/components/metric-tile/metric-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,kBAAkB;;8EAYtB,CAAA;AAEF,QAAA,MAAM,uBAAuB;;8EAU3B,CAAA;AAEF,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;IAC9B,0DAA0D;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,MAAM,WAAW,eACf,SACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAC7C,YAAY,CAAC,OAAO,kBAAkB,CAAC,EACvC,YAAY,CAAC,OAAO,uBAAuB,CAAC;IAC9C,mFAAmF;IACnF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,4CAA4C;IAC5C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,uDAAuD;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,gFAAgF;AAChF,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAoEjB;AAED,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/metric-tile/metric-tile.js

@@ -0,0 +1,75 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { IconArrowDownRight as i, IconArrowUpRight as a } from "@tabler/icons-react";
+//#region src/components/metric-tile/metric-tile.tsx
+var o = t("flex min-w-0 flex-col", {
+	variants: { variant: {
+		subtle: "rounded-xl bg-surface-subtle px-4 py-3",
+		plain: ""
+	} },
+	defaultVariants: { variant: "subtle" }
+}), s = t("tabular-nums", {
+	variants: { size: {
+		lg: "type-page-title",
+		md: "type-metric"
+	} },
+	defaultVariants: { size: "lg" }
+});
+function c({ label: t, icon: c, value: l, unit: u, delta: d, note: f, variant: p, size: m, className: h, ...g }) {
+	let _ = d?.tone ?? (d?.trend === "down" ? "negative" : "positive"), v = d?.trend === "down" ? i : a;
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "metric-tile",
+		"data-variant": p ?? "subtle",
+		className: e(o({ variant: p }), h),
+		...g,
+		children: [
+			c ? /* @__PURE__ */ r("p", {
+				"data-slot": "metric-tile-label",
+				className: "type-label flex items-center gap-2 font-medium",
+				children: [c, t]
+			}) : /* @__PURE__ */ n("p", {
+				"data-slot": "metric-tile-label",
+				className: "type-meta text-muted-foreground",
+				children: t
+			}),
+			/* @__PURE__ */ n("p", {
+				"data-slot": "metric-tile-value",
+				className: e(s({ size: m }), c ? "mt-5" : m === "md" && "mt-0.5"),
+				children: l
+			}),
+			u ? /* @__PURE__ */ n("div", {
+				className: "type-meta text-muted-foreground",
+				children: u
+			}) : null,
+			d ? /* @__PURE__ */ r("p", {
+				"data-slot": "metric-tile-delta",
+				"data-trend": d.trend,
+				className: "type-meta mt-0.5 flex items-center gap-1 text-muted-foreground",
+				children: [
+					/* @__PURE__ */ n(v, {
+						"aria-hidden": "true",
+						className: e("icon-optical-14 shrink-0", _ === "positive" ? "text-success" : "text-warning")
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "sr-only",
+						children: [
+							d.trend === "up" ? "Up" : "Down",
+							",",
+							" "
+						]
+					}),
+					d.label
+				]
+			}) : null,
+			f ? /* @__PURE__ */ n("div", {
+				"data-slot": "metric-tile-note",
+				className: "type-meta text-muted-foreground",
+				children: f
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as MetricTile, o as metricTileVariants };

package/dist/components/page-header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './page-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/page-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/components/page-header/page-header.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+type PageHeaderProps = Omit<React.ComponentProps<'header'>, 'title'> & {
+    /** The page title. */
+    title: React.ReactNode;
+    /** One muted line under the title. */
+    subtitle?: React.ReactNode;
+    /** A small line above the title, such as today's date. */
+    eyebrow?: React.ReactNode;
+    /** The page's own actions, top right. */
+    actions?: React.ReactNode;
+    /** Use the display title (a greeting or editorial title) instead of the page title. */
+    display?: boolean;
+};
+declare function PageHeader({ title, subtitle, eyebrow, actions, display, className, ...props }: PageHeaderProps): React.JSX.Element;
+export { PageHeader, type PageHeaderProps };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/page-header/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAyCjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,CAAA"}

package/dist/components/page-header/page-header.js

@@ -0,0 +1,38 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/page-header/page-header.tsx
+function r({ title: r, subtitle: i, eyebrow: a, actions: o, display: s = !1, className: c, ...l }) {
+	return /* @__PURE__ */ n("header", {
+		"data-slot": "page-header",
+		className: e("flex items-start justify-between gap-6", c),
+		...l,
+		children: [/* @__PURE__ */ n("div", {
+			"data-slot": "page-header-content",
+			className: "min-w-0",
+			children: [
+				a ? /* @__PURE__ */ t("p", {
+					"data-slot": "page-header-eyebrow",
+					className: "type-meta mb-1.5 font-medium text-muted-foreground",
+					children: a
+				}) : null,
+				/* @__PURE__ */ t("h1", {
+					"data-slot": "page-header-title",
+					className: s ? "type-display-title" : "type-page-title",
+					children: r
+				}),
+				i ? /* @__PURE__ */ t("p", {
+					"data-slot": "page-header-subtitle",
+					className: "type-lead mt-2 max-w-[760px] text-muted-foreground",
+					children: i
+				}) : null
+			]
+		}), o ? /* @__PURE__ */ t("div", {
+			"data-slot": "page-header-actions",
+			className: "flex flex-none items-center gap-2",
+			children: o
+		}) : null]
+	});
+}
+//#endregion
+export { r as PageHeader };

package/dist/components/platform-avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './platform-avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/platform-avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/platform-avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/components/platform-avatar/platform-avatar.d.ts

@@ -0,0 +1,23 @@
+import { Avatar } from '../avatar';
+import { Platform } from '../platform-icon/platform-icon';
+import * as React from 'react';
+type PlatformAvatarProps = Omit<React.ComponentProps<typeof Avatar>, 'size' | 'children' | 'style'> & {
+    style?: React.CSSProperties;
+    /** Profile photo. Without one, or while it loads, the first letter of `name` shows. */
+    src?: string | null;
+    /** Account or person name; its first letter is the fallback. A leading @ is skipped. */
+    name?: string;
+    /** Text alternative for the photo. Empty by default, since a name usually sits beside it. */
+    alt?: string;
+    /** Diameter in pixels. The scorecard uses 18, 20, 24, 26 and 32. */
+    size?: number;
+    /** Shows the platform's mark in a small badge at the bottom-right corner. */
+    platform?: Platform;
+    /** Names the badge's platform for assistive tech when no visible text says it. */
+    platformLabel?: string | boolean;
+    /** `cover` fills the circle with a photo; `contain` insets a logo on the card surface with a hairline ring. */
+    fit?: 'cover' | 'contain';
+};
+declare function PlatformAvatar({ src, name, alt, size, platform, platformLabel, fit, className, style, ...props }: PlatformAvatarProps): React.JSX.Element;
+export { PlatformAvatar, type PlatformAvatarProps };
+//# sourceMappingURL=platform-avatar.d.ts.map

package/dist/components/platform-avatar/platform-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/platform-avatar/platform-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,MAAM,EAA+B,MAAM,WAAW,CAAA;AAC/D,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,gCAAgC,CAAA;AAEvC,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,MAAM,GAAG,UAAU,GAAG,OAAO,CAC9B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,uFAAuF;IACvF,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6FAA6F;IAC7F,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAChC,+GAA+G;IAC/G,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC1B,CAAA;AAWD,iBAAS,cAAc,CAAC,EACtB,GAAG,EACH,IAAI,EACJ,GAAQ,EACR,IAAS,EACT,QAAQ,EACR,aAAa,EACb,GAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAkDrB;AAED,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAA"}

package/dist/components/platform-avatar/platform-avatar.js

@@ -0,0 +1,54 @@
+import { cn as e } from "../../lib/utils.js";
+import { Avatar as t, AvatarFallback as n, AvatarImage as r } from "../avatar/avatar.js";
+import { PLATFORM_LABEL as i, PlatformIcon as a } from "../platform-icon/platform-icon.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/platform-avatar/platform-avatar.tsx
+function c(e) {
+	return (e ?? "").replace(/^@/, "").charAt(0).toUpperCase();
+}
+function l(e) {
+	return Math.max(10, Math.round(e * .45));
+}
+function u({ src: u, name: d, alt: f = "", size: p = 24, platform: m, platformLabel: h, fit: g = "cover", className: _, style: v, ...y }) {
+	let b = l(p), x = m && h ? typeof h == "string" ? h : i[m] : void 0;
+	return /* @__PURE__ */ s(t, {
+		"data-platform": m,
+		"data-fit": g,
+		className: e("bg-surface-subtle after:hidden", g === "contain" && "bg-card ring-1 ring-border-subtle", _),
+		style: {
+			width: p,
+			height: p,
+			"--platform-avatar-size": `${p}px`,
+			...v
+		},
+		...y,
+		children: [
+			u ? /* @__PURE__ */ o(r, {
+				src: u,
+				alt: f,
+				className: e(g === "contain" && "bg-card object-contain p-0.5")
+			}) : null,
+			/* @__PURE__ */ o(n, {
+				"aria-hidden": "true",
+				className: "bg-surface-subtle font-medium text-muted-foreground text-[length:calc(var(--platform-avatar-size)*0.45)]",
+				children: c(d)
+			}),
+			m ? /* @__PURE__ */ o("span", {
+				"data-slot": "platform-avatar-badge",
+				className: "absolute -right-0.5 -bottom-0.5 z-10 flex items-center justify-center rounded-full bg-card ring-2 ring-card",
+				style: {
+					width: b,
+					height: b
+				},
+				children: /* @__PURE__ */ o(a, {
+					platform: m,
+					size: b - 2,
+					title: x
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { u as PlatformAvatar };

package/dist/components/platform-icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './platform-icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/platform-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/platform-icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/components/platform-icon/platform-icon.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+type Platform = 'x' | 'threads' | 'instagram' | 'facebook' | 'bluesky' | 'linkedin' | 'tiktok' | 'youtube' | 'google' | 'beehiiv' | 'reddit';
+declare const PLATFORMS: readonly Platform[];
+declare const PLATFORM_COLOR: Record<Platform, string>;
+declare const PLATFORM_LABEL: Record<Platform, string>;
+type BrandIconProps = Omit<React.SVGProps<SVGSVGElement>, 'ref' | 'stroke'> & {
+    size?: number | string;
+    stroke?: number | string;
+    title?: string;
+};
+type BrandIcon = React.ForwardRefExoticComponent<BrandIconProps & React.RefAttributes<SVGSVGElement>>;
+declare const BrandX: BrandIcon;
+declare const BrandThreads: BrandIcon;
+declare const BrandFacebook: BrandIcon;
+declare const BrandLinkedin: BrandIcon;
+declare const BrandTiktok: BrandIcon;
+declare const BrandYoutube: BrandIcon;
+declare const BrandReddit: BrandIcon;
+declare const BrandBluesky: BrandIcon;
+declare const BrandInstagram: BrandIcon;
+declare const BrandGoogle: BrandIcon;
+declare const BrandBeehiiv: BrandIcon;
+declare const PLATFORM_ICON: Record<Platform, BrandIcon>;
+type PlatformIconProps = Omit<BrandIconProps, 'size'> & {
+    platform: Platform;
+    /** Rendered width and height in pixels. */
+    size?: number;
+    /** Names the mark for assistive tech; omit when a visible label says the platform. */
+    title?: string;
+};
+declare function PlatformIcon({ platform, size, className, style, ...props }: PlatformIconProps): React.JSX.Element;
+export { PlatformIcon, PLATFORMS, PLATFORM_COLOR, PLATFORM_ICON, PLATFORM_LABEL, BrandX, BrandThreads, BrandInstagram, BrandFacebook, BrandBluesky, BrandLinkedin, BrandTiktok, BrandYoutube, BrandGoogle, BrandBeehiiv, BrandReddit, type BrandIcon, type BrandIconProps, type Platform, type PlatformIconProps, };
+//# sourceMappingURL=platform-icon.d.ts.map

package/dist/components/platform-icon/platform-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform-icon.d.ts","sourceRoot":"","sources":["../../../src/components/platform-icon/platform-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,KAAK,QAAQ,GACT,GAAG,GACH,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,SAAS,GACT,QAAQ,CAAA;AAEZ,QAAA,MAAM,SAAS,EAAE,SAAS,QAAQ,EAYjC,CAAA;AAID,QAAA,MAAM,cAAc,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAY5C,CAAA;AAED,QAAA,MAAM,cAAc,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAY5C,CAAA;AAMD,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG;IAC5E,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,SAAS,GAAG,KAAK,CAAC,yBAAyB,CAC9C,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CACpD,CAAA;AAqCD,QAAA,MAAM,MAAM,WAAkD,CAAA;AAC9D,QAAA,MAAM,YAAY,WAA8D,CAAA;AAChF,QAAA,MAAM,aAAa,WAIlB,CAAA;AACD,QAAA,MAAM,aAAa,WAIlB,CAAA;AACD,QAAA,MAAM,WAAW,WAIhB,CAAA;AACD,QAAA,MAAM,YAAY,WAIjB,CAAA;AACD,QAAA,MAAM,WAAW,WAA2D,CAAA;AAE5E,QAAA,MAAM,YAAY,WAKjB,CAAA;AAmCD,QAAA,MAAM,cAAc,WAgBlB,CAAA;AAGF,QAAA,MAAM,WAAW,WAmBf,CAAA;AAGF,QAAA,MAAM,YAAY,WAYhB,CAAA;AAEF,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAY9C,CAAA;AAED,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IACtD,QAAQ,EAAE,QAAQ,CAAA;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,IAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAanB;AAED,OAAO,EACL,YAAY,EACZ,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,MAAM,EACN,YAAY,EACZ,cAAc,EACd,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,iBAAiB,GACvB,CAAA"}