@valentinkolb/cloud 0.1.0

package/src/ui/widgets/WidgetPills.tsx

@@ -0,0 +1,68 @@
+import type { JSX } from "solid-js";
+
+/**
+ * Pills block inside a Widget — flex-wrap row of compact label + value chips.
+ * Same visual style as the pill-row pattern used for compact KPIs in admin
+ * pages.
+ */
+type Tone = "emerald" | "amber" | "red" | "blue" | "zinc";
+
+const PILL_TONE: Record<Tone, string> = {
+  emerald: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
+  amber: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
+  red: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300",
+  blue: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300",
+  zinc: "bg-zinc-100 dark:bg-zinc-800/70 text-secondary",
+};
+
+export type WidgetPill = {
+  label: string;
+  value: string | number;
+  tone?: Tone;
+  href?: string;
+};
+
+type WidgetPillsProps = {
+  pills: WidgetPill[];
+  /** Fills remaining vertical space and centres its pills. */
+  grow?: boolean;
+};
+
+const Pill = (props: { pill: WidgetPill }): JSX.Element => {
+  const tone = () => props.pill.tone ?? "zinc";
+  const baseClass = () => `inline-flex items-baseline gap-1.5 rounded-md px-2 py-0.5 ${PILL_TONE[tone()]}`;
+  const labelTone = () =>
+    tone() === "zinc"
+      ? "uppercase tracking-wider text-[10px] text-dimmed"
+      : "uppercase tracking-wider text-[10px]";
+  const valueTone = () => "text-xs font-bold tabular-nums";
+
+  if (props.pill.href) {
+    return (
+      <a href={props.pill.href} class={`${baseClass()} hover:opacity-80 transition-opacity`}>
+        <span class={labelTone()}>{props.pill.label}</span>
+        <span class={valueTone()}>{props.pill.value}</span>
+      </a>
+    );
+  }
+  return (
+    <span class={baseClass()}>
+      <span class={labelTone()}>{props.pill.label}</span>
+      <span class={valueTone()}>{props.pill.value}</span>
+    </span>
+  );
+};
+
+const WidgetPills = (props: WidgetPillsProps): JSX.Element => (
+  <div
+    class={`px-4 py-3 flex flex-wrap gap-1.5 ${
+      props.grow ? "flex-1 content-center" : ""
+    }`}
+  >
+    {props.pills.map((pill) => (
+      <Pill pill={pill} />
+    ))}
+  </div>
+);
+
+export default WidgetPills;

package/src/ui/widgets/WidgetStat.tsx

@@ -0,0 +1,67 @@
+import type { JSX } from "solid-js";
+
+/**
+ * Stat block inside a Widget — one big number, label, optional sub line and
+ * accent. Same conventions as `StatCell` but full-width and with more breathing
+ * room for the dashboard rather than the dense admin grid.
+ */
+type Tone = "emerald" | "amber" | "red" | "blue" | "zinc";
+
+const ICON_TONE: Record<Tone, string> = {
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  red: "text-red-500 dark:text-red-400",
+  blue: "text-blue-600 dark:text-blue-400",
+  zinc: "text-zinc-500 dark:text-zinc-400",
+};
+
+const PILL_TONE: Record<Tone, string> = {
+  emerald: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
+  amber: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300",
+  red: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300",
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300",
+  zinc: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
+};
+
+type WidgetStatProps = {
+  value: string | number;
+  label: string;
+  sub?: string;
+  /** Override the default value colour. */
+  valueClass?: string;
+  /** Optional accent — text → pill with bg, no text → plain colored icon. */
+  accent?: { tone: Tone; icon: string; text?: string };
+  /** Fills remaining vertical space inside the widget; content centred. */
+  grow?: boolean;
+};
+
+const WidgetStat = (props: WidgetStatProps): JSX.Element => {
+  const valueClass = () => props.valueClass ?? "text-primary";
+  const containerClass = () =>
+    props.grow ? "px-4 py-4 flex flex-col gap-1 flex-1 justify-center" : "px-4 py-4 flex flex-col gap-1";
+  return (
+    <div class={containerClass()}>
+      <span class="text-[10px] uppercase tracking-wider text-dimmed">{props.label}</span>
+      <span class={`text-3xl font-bold tabular-nums leading-none ${valueClass()}`}>
+        {props.value}
+      </span>
+      {props.sub || props.accent ? (
+        <div class="flex items-center gap-1.5">
+          {props.sub ? <span class="text-[11px] text-dimmed">{props.sub}</span> : null}
+          {props.accent ? (
+            props.accent.text ? (
+              <span class={`tag ${PILL_TONE[props.accent.tone]}`}>
+                <i class={`${props.accent.icon} text-[9px]`} />
+                {props.accent.text}
+              </span>
+            ) : (
+              <i class={`${props.accent.icon} ${ICON_TONE[props.accent.tone]} text-[12px]`} />
+            )
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default WidgetStat;

package/src/ui/widgets/WidgetStatus.tsx

@@ -0,0 +1,62 @@
+import type { JSX } from "solid-js";
+
+/**
+ * Status block inside a Widget — a tinted banner-style row with an icon,
+ * title and message. Use to surface health / state at a glance.
+ */
+type Tone = "ok" | "warn" | "error" | "info";
+
+const TONE_STYLES: Record<Tone, { bg: string; text: string; icon: string; defaultIcon: string }> = {
+  ok: {
+    bg: "bg-emerald-50 dark:bg-emerald-900/20",
+    text: "text-emerald-800 dark:text-emerald-200",
+    icon: "text-emerald-600 dark:text-emerald-400",
+    defaultIcon: "ti ti-circle-check",
+  },
+  warn: {
+    bg: "bg-amber-50 dark:bg-amber-900/20",
+    text: "text-amber-800 dark:text-amber-200",
+    icon: "text-amber-600 dark:text-amber-400",
+    defaultIcon: "ti ti-alert-triangle",
+  },
+  error: {
+    bg: "bg-red-50 dark:bg-red-900/20",
+    text: "text-red-800 dark:text-red-200",
+    icon: "text-red-600 dark:text-red-400",
+    defaultIcon: "ti ti-alert-circle",
+  },
+  info: {
+    bg: "bg-blue-50 dark:bg-blue-900/20",
+    text: "text-blue-800 dark:text-blue-200",
+    icon: "text-blue-600 dark:text-blue-400",
+    defaultIcon: "ti ti-info-circle",
+  },
+};
+
+type WidgetStatusProps = {
+  tone: Tone;
+  title: string;
+  message?: string;
+  icon?: string;
+  /** Fills remaining vertical space and centres its content. */
+  grow?: boolean;
+};
+
+const WidgetStatus = (props: WidgetStatusProps): JSX.Element => {
+  const styles = () => TONE_STYLES[props.tone];
+  const containerClass = () =>
+    props.grow
+      ? `px-4 py-3 flex items-center gap-3 ${styles().bg} flex-1`
+      : `px-4 py-3 flex items-start gap-3 ${styles().bg}`;
+  return (
+    <div class={containerClass()}>
+      <i class={`${props.icon ?? styles().defaultIcon} ${styles().icon} text-base ${props.grow ? "" : "mt-0.5"} shrink-0`} />
+      <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+        <span class={`text-xs font-semibold ${styles().text}`}>{props.title}</span>
+        {props.message ? <span class={`text-[11px] ${styles().text} opacity-80`}>{props.message}</span> : null}
+      </div>
+    </div>
+  );
+};
+
+export default WidgetStatus;

package/src/ui/widgets/index.ts

@@ -0,0 +1,9 @@
+export { default as WidgetCard } from "./WidgetCard";
+export { default as Widget } from "./Widget";
+export { default as WidgetStat } from "./WidgetStat";
+export { default as WidgetList } from "./WidgetList";
+export type { WidgetListItem } from "./WidgetList";
+export { default as WidgetStatus } from "./WidgetStatus";
+export { default as WidgetPills } from "./WidgetPills";
+export type { WidgetPill } from "./WidgetPills";
+export { default as WidgetHero } from "./WidgetHero";