@heyramzi/ui 2.24.0 → 3.0.0

package/src/charts/charts.css

@@ -1,156 +1,168 @@
-/* Layerchart's tooltip falls back to translucent white on a dark page without
-   `--color-surface-*`, so these unlayered rules repaint it with `--popover`,
-   beating its `@layer component` defaults. */
-
-.lc-tooltip-container[data-variant="default"] {
-  color: var(--popover-foreground, var(--foreground));
-  background-color: var(--popover, #fff);
-  border: 0;
-  border-radius: var(--radius-lg);
-  padding: 0.625rem 0.75rem;
-  min-width: 8.75rem;
-  backdrop-filter: none;
-  box-shadow: var(--elev-hairline), var(--elev-raised);
-  /* WHY: opacity only; the container's transform is inline positioning, so
-	   animating transform here would fight it and make the tooltip jump. */
-  transform-origin: top left;
-  animation: hr-tooltip-in var(--duration-fast, 250ms) var(--ease-smooth-out) both;
-}
+@layer theme, base, components, utilities;
 
-/* WHY `scale` and `translate`, not `transform`: the container's inline transform is
-   its position, and the individual properties compose with it instead of fighting. */
-@keyframes hr-tooltip-in {
-  from {
-    opacity: 0;
-    scale: var(--scale-large, 0.96);
-    translate: calc(var(--distance-small, 6px) * -1) 0;
-  }
-}
+/* Layerchart's tooltip falls back to translucent white without `--color-surface-*`, so these
+   repaint it with `--popover`. Its rules share this layer, so each selector here outweighs theirs. */
 
-@media (prefers-reduced-motion: reduce) {
+@layer components {
   .lc-tooltip-container[data-variant="default"] {
-    animation: none;
+    color: var(--popover-foreground, var(--foreground));
+    background-color: var(--popover, #fff);
+    border: 0;
+    border-radius: var(--radius-lg);
+    padding: 0.625rem 0.75rem;
+    min-width: 8.75rem;
+    backdrop-filter: none;
+    box-shadow: var(--elev-hairline), var(--elev-raised);
+    /* WHY: opacity only; the container's transform is inline positioning, so
+  	   animating transform here would fight it and make the tooltip jump. */
+    transform-origin: top left;
+    animation: hr-tooltip-in var(--duration-fast, 250ms) var(--ease-smooth-out) both;
   }
-}
 
-/* bklit-ui's panel: a small title with no rule under it, and a dot on every row. */
-.lc-tooltip-header {
-  color: var(--popover-foreground, var(--foreground));
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-bottom: none;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0;
-}
+  @media (prefers-reduced-motion: reduce) {
+    .lc-tooltip-container[data-variant="default"] {
+      animation: none;
+    }
+  }
 
-.lc-tooltip-list {
-  gap: 0.375rem 1rem;
-  font-size: 0.8125rem;
-}
+  /* bklit-ui's panel: a small title with no rule under it, and a dot on every row. */
+  .lc-tooltip-header {
+    color: var(--popover-foreground, var(--foreground));
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-bottom: none;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0;
+  }
 
-.lc-tooltip-item-color {
-  width: 0.625rem;
-  height: 0.625rem;
-}
+  .lc-tooltip-list {
+    gap: 0.375rem 1rem;
+    font-size: 0.8125rem;
+  }
 
-.lc-tooltip-item-label,
-.lc-tooltip-container .label {
-  color: var(--muted-foreground);
-}
+  .lc-tooltip-item-color {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
 
-.lc-tooltip-item-value,
-.lc-tooltip-container .value {
-  color: var(--popover-foreground, var(--foreground));
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
+  /* `[data-variant]` outweighs Layerchart's `[data-variant="default"] .label` under `:where()`. */
+  .lc-tooltip-item-label,
+  .lc-tooltip-container[data-variant] .label {
+    color: var(--muted-foreground);
+  }
 
-/* Axis labels, grid rules and hover highlights for every chart, defined once.
-   `:where()` keeps specificity at 0 so a component can still override them. */
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-axis-tick-label {
-  fill: var(--chart-label);
-  font-size: 11px;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-axis-tick {
-  stroke: transparent;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  :is(.lc-grid-x-rule, .lc-grid-y-rule) {
-  stroke: var(--chart-grid);
-  stroke-dasharray: 4 4;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-highlight-point {
-  stroke: var(--background, white);
-  stroke-width: 2;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-highlight-line {
-  stroke: var(--chart-grid);
-  stroke-width: 1;
-  stroke-dasharray: none;
-}
-/* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
-   stretch around the point at full strength. */
-.hr-hover-dim {
-  transition: opacity var(--duration-slow, 300ms)
-    var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
-}
-.hr-hover-dim.hr-hover-dimmed {
-  opacity: 0.3;
-}
-@media (prefers-reduced-motion: reduce) {
+  .lc-tooltip-item-value,
+  .lc-tooltip-container .value {
+    color: var(--popover-foreground, var(--foreground));
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Axis labels, grid rules and hover highlights for every chart, defined once.
+     `:where()` keeps specificity at 0 so a component can still override them. */
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-axis-tick-label {
+    fill: var(--chart-label);
+    font-size: 11px;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-axis-tick {
+    stroke: transparent;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    :is(.lc-grid-x-rule, .lc-grid-y-rule) {
+    stroke: var(--chart-grid);
+    stroke-dasharray: 4 4;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-highlight-point {
+    stroke: var(--background, white);
+    stroke-width: 2;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-highlight-line {
+    stroke: var(--chart-grid);
+    stroke-width: 1;
+    stroke-dasharray: none;
+  }
+
+  /* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
+     stretch around the point at full strength. */
   .hr-hover-dim {
-    transition: none;
+    transition: opacity var(--duration-slow, 300ms)
+      var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
+  }
+
+  .hr-hover-dim.hr-hover-dimmed {
+    opacity: 0.3;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-hover-dim {
+      transition: none;
+    }
+  }
+
+  .hr-crosshair-stop {
+    stop-color: var(--chart-crosshair);
   }
 }
-.hr-crosshair-stop {
-  stop-color: var(--chart-crosshair);
+
+/* WHY `scale` and `translate`, not `transform`: the container's inline transform is
+   its position, and the individual properties compose with it instead of fighting. */
+@keyframes hr-tooltip-in {
+  from {
+    opacity: 0;
+    scale: var(--scale-large, 0.96);
+    translate: calc(var(--distance-small, 6px) * -1) 0;
+  }
 }

package/src/charts/crosshair.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    /** Gradient id. Paint the highlight line with `stroke: url(#id)`. */
+    id: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/dashboard-section.svelte

@@ -17,6 +17,8 @@
 		href?: string;
 		/** The link's wording. Translated at the call site. */
 		openLabel?: string;
+		/** Controls that scope the whole area, like a period filter. Pinned right, after the note. */
+		actions?: Snippet;
 		children: Snippet;
 		class?: string;
 	}
@@ -24,7 +26,15 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { title, note, href, openLabel = "Open", children, class: className }: Props = $props();
+	let {
+		title,
+		note,
+		href,
+		openLabel = "Open",
+		actions,
+		children,
+		class: className,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->
@@ -33,9 +43,11 @@
 <!-- An area of a dashboard, named, then its numbers. No box of its own: its
      cards are the containers, and a card in a card is never right. -->
 <section class={cn("flex flex-col gap-4", className)}>
-	<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+	<!-- Centred, not baseline: a filter control is taller than the title, and a baseline row
+	     hangs the title off its bottom edge. -->
+	<div class="flex min-h-8 flex-wrap items-center justify-between gap-x-4 gap-y-2">
 		<h2 class="text-base font-semibold tracking-tight">{title}</h2>
-		<div class="flex items-baseline gap-3">
+		<div class="flex items-center gap-3">
 			{#if note}
 				<p class="text-xs text-muted-foreground">{note}</p>
 			{/if}
@@ -46,11 +58,15 @@
 				>
 					{openLabel}
 					<ArrowRight
+						aria-hidden="true"
 						size={12}
 						class="shrink-0 transition-transform duration-[var(--duration-quick)] ease-out group-hover:translate-x-0.5"
 					/>
 				</a>
 			{/if}
+			{#if actions}
+				{@render actions()}
+			{/if}
 		</div>
 	</div>
 

package/src/charts/dashboard/dashboard-section.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    /** One line on the right: a window, a provenance, a count. Never a sentence. */
+    note?: string;
+    /** The page that owns this area, when one page does. */
+    href?: string;
+    /** The link's wording. Translated at the call site. */
+    openLabel?: string;
+    /** Controls that scope the whole area, like a period filter. Pinned right, after the note. */
+    actions?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/data-table.svelte

@@ -235,7 +235,7 @@
 								"align-middle whitespace-nowrap",
 								column.strong && "font-medium",
 								isMuted(column, row) && "text-muted-foreground",
-								column.negative?.(row) && "text-destructive",
+								column.negative?.(row) && "text-destructive-ink",
 							)}
 							title={column.title?.(row)}
 						>

package/src/charts/dashboard/data-table.svelte.d.ts

@@ -0,0 +1,86 @@
+import type { Snippet } from "svelte";
+/** Narrow screens drop the columns that only add detail. */
+export type DataColumnBreakpoint = "sm" | "md" | "lg";
+/** One column after the lead. Give it `value`, `rating` or a `cell` snippet. */
+export type DataColumn<T> = {
+    key: string;
+    label: string;
+    /** The long form of the head, as its tooltip. */
+    hint?: string;
+    /** A Tailwind width class. Fixed widths are what keep the lead column wide. */
+    width: string;
+    /** Figures run to the end, so digits line up. Text, pills and bars start. */
+    align?: "start" | "end";
+    /** Makes the head rank the table. Higher is better; a new column starts descending. */
+    sort?: (row: T) => number;
+    /** Null draws the table's empty label, muted. */
+    value?: (row: T) => string | null;
+    rating?: (row: T) => {
+        grade: string;
+        hint?: string;
+    } | null;
+    cell?: Snippet<[T]>;
+    /** 0 to 1, a share-of-max track drawn before the value. */
+    bar?: (row: T) => number;
+    /** Cell tooltip. */
+    title?: (row: T) => string | undefined;
+    muted?: boolean | ((row: T) => boolean);
+    /** A loss, an overrun: the value turns the destructive colour. */
+    negative?: (row: T) => boolean;
+    /** The column the eye lands on first. */
+    strong?: boolean;
+    /** A hairline before this column, opening a group. */
+    rule?: boolean;
+    /** Hidden under this breakpoint. */
+    hideBelow?: DataColumnBreakpoint;
+};
+import { type SortState } from "../../components/data-table/index.js";
+declare function $$render<T>(): {
+    props: {
+        rows: T[];
+        columns: DataColumn<T>[];
+        rowKey: (row: T) => string;
+        leadLabel: string;
+        lead: Snippet<[T]>;
+        /** Drawn where a value or rating is null. */
+        emptyLabel: string;
+        /** A Tailwind width class. Omit and the lead takes whatever the figures leave. */
+        leadWidth?: string;
+        /** A Tailwind min-width class, past which the panel scrolls sideways. */
+        minWidth?: string;
+        /** Omit for every row on one page. */
+        pageSize?: number;
+        /** The ranked column and its direction. Bind it; a column with `sort` sets it. */
+        sort?: SortState;
+        page?: number;
+        /** The row opens a page. The lead becomes the link. */
+        rowHref?: (row: T) => string;
+        /** The row opens in place: a panel, a detail view. The lead becomes the button. */
+        onRowClick?: (row: T) => void;
+        /** Placeholder rows while the data is on its way. */
+        loading?: boolean;
+        /** Drawn in place of the body when there are no rows. */
+        empty?: Snippet;
+    };
+    exports: {};
+    bindings: "sort" | "page";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sort" | "page";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/src/charts/dashboard/index.ts

@@ -1,4 +1,3 @@
-export { default as DataPanel } from "../../lib/panel.svelte";
 export {
   default as DataTable,
   type DataColumn,

package/src/charts/dashboard/panel-grid.svelte

@@ -9,7 +9,7 @@
 	// TYPES
 	// =========================
 	interface Props {
-		/** `<DataPanel>` children, or tiles standing beside one. */
+		/** `<DetailPanel>` children, or tiles standing beside one. */
 		children: Snippet;
 		/**
 		 * Panels per row: two charts, three breakdowns, or `main`, where the first

package/src/charts/dashboard/panel-grid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** `<DetailPanel>` children, or tiles standing beside one. */
+    children: Snippet;
+    /**
+     * Panels per row: two charts, three breakdowns, or `main`, where the first
+     * child takes two thirds and the rates beside it one third.
+     */
+    columns?: 2 | 3 | "main";
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/period-filter.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type TabDef } from "../../components/segmented/index.js";
+declare function $$render<T extends string>(): {
+    props: {
+        options: readonly TabDef<T>[];
+        value: T;
+        /**
+         * Give this and the strip is links, so the choice survives reload, back and a
+         * shared link. Omit it and the strip is a `<SegmentedFilter>` the caller owns.
+         */
+        href?: (value: T) => string;
+        /** Filter mode only. Ignored when `href` is set. */
+        onValueChange?: (value: T) => void;
+        ariaLabel: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T extends string> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/src/charts/dashboard/rating-chip.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    grade: string;
+    /** What the letter hides: the score and what it was charged for. */
+    hint?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/stat-band.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** `<StatTile>` children. Four to a row on a desk, two on a phone. */
+    children: Snippet;
+    /**
+     * Cards per row at the widest breakpoint, four unless the set is smaller.
+     * Five and six are only for a fixed scorecard. The headline stays one row.
+     */
+    columns?: 2 | 3 | 4 | 5 | 6;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/stat-tile.svelte

@@ -123,7 +123,7 @@
 	)}
 >
 	{#snippet tileIcon()}
-		{#if Icon}<Icon size={14} class="shrink-0" />{/if}
+		{#if Icon}<Icon aria-hidden="true" size={14} class="shrink-0" />{/if}
 	{/snippet}
 
 	<NumberChart
@@ -174,9 +174,13 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* WHY scoped here: `NumberChart` has no
-	   series, so the sparkline's bottom room is added on the tile that draws it. */
-	.hr-stat-tile[data-series] :global(.hr-number-chart) {
-		padding-bottom: 4.25rem;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* WHY scoped here: `NumberChart` has no
+		   series, so the sparkline's bottom room is added on the tile that draws it. */
+		.hr-stat-tile[data-series] :global(.hr-number-chart) {
+			padding-bottom: 4.25rem;
+		}
 	}
 </style>