@heyramzi/ui 2.24.0 → 3.0.0

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

@@ -0,0 +1,62 @@
+/**
+ * Which way a metric has to move to be good news. `neutral` fits a figure like
+ * spend, which isn't a win or a loss until the return sits beside it.
+ */
+export type StatDirection = "up-good" | "down-good" | "neutral";
+import type { Snippet } from "svelte";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+interface Props {
+    label: string;
+    /** Already formatted. The tile never guesses a currency or a locale. */
+    value: string;
+    /**
+     * Percent change against the previous period. `null` means nothing to
+     * compare yet and draws a dash. Omit it when the figure has no period at all.
+     */
+    deltaPct?: number | null;
+    direction?: StatDirection;
+    /** The one figure the screen was opened to read. Set it on exactly one tile. */
+    lead?: boolean;
+    /** A quiet line under the value: what it was measured over, or why it is a dash. */
+    hint?: string;
+    /**
+     * 0 to 1, drawn as a track under the value: share of a total or progress to
+     * a target. Omit it for a cash balance.
+     */
+    share?: number;
+    /** What `share` is measured against, e.g. "of revenue". Only with `share`. */
+    shareLabel?: string;
+    /** Track colour. The first series token unless a tile means something else. */
+    color?: string;
+    /**
+     * A shape behind the figure, oldest first, bled along the card's bottom.
+     * The treatment every tile gives a number with a history. Omit when there
+     * is none.
+     */
+    series?: number[];
+    /** Leading mark before the label. */
+    icon?: PhosphorIcon;
+    /**
+     * Makes the tile a link, like a balance that opens the bank. It lives here so
+     * a linked figure isn't drawn as a second, different card style.
+     */
+    href?: string;
+    /** What the link opens, shown on hover. Only with `href`. */
+    hrefLabel?: string;
+    /**
+     * `_blank` for a figure that leaves the app (a bank, a provider console),
+     * `_self` for one that is another page of this app. Only with `href`.
+     */
+    target?: "_self" | "_blank";
+    /**
+     * A chip at the end of the label row: the limit the figure is judged against,
+     * the state it is in. Wins over `hrefLabel`, which is only a hover hint.
+     */
+    badge?: Snippet;
+    /** A loss or an overrun: the figure turns the destructive colour. */
+    negative?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/donut-chart.css

@@ -1,56 +1,62 @@
+@layer theme, base, components, utilities;
+
 /* Styles for DonutChart. Plain stylesheet (see area-chart.css for why).
    Selectors are namespaced under `.hr-donut-chart`. */
 
-.hr-donut-chart {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.hr-donut-chart .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
-  border-radius: 0.5rem;
-}
-.hr-donut-chart .empty p {
-  font-size: 0.8125rem;
-  color: var(--chart-label, oklch(0.5 0.01 286));
-  margin: 0;
-}
+@layer components {
+  .hr-donut-chart {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
 
-/* The slice slides out a little slower than it slides back: a close is always the quicker. */
-.hr-donut-chart .hr-donut-arc {
-  cursor: pointer;
-  transition:
-    opacity var(--chart-motion-fast, 150ms) ease,
-    translate var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-}
-.hr-donut-chart .hr-donut-arc[data-hovered] {
-  transition:
-    opacity var(--chart-motion-fast, 150ms) ease,
-    translate var(--duration-fast, 250ms) var(--ease-smooth-out);
-}
+  .hr-donut-chart .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+    border-radius: 0.5rem;
+  }
 
-.hr-donut-chart .hr-donut-center-value {
-  fill: var(--foreground, oklch(0.18 0.02 240));
-  font-size: 16px;
-  font-weight: 600;
-  font-feature-settings: "tnum";
-  transition: opacity 180ms ease;
-}
+  .hr-donut-chart .empty p {
+    font-size: 0.8125rem;
+    color: var(--chart-label, oklch(0.5 0.01 286));
+    margin: 0;
+  }
 
-.hr-donut-chart .hr-donut-center-label {
-  fill: var(--chart-label, oklch(0.5 0.01 286));
-  font-size: 11px;
-  transition: opacity 180ms ease;
-}
+  /* The slice slides out a little slower than it slides back: a close is always the quicker. */
+  .hr-donut-chart .hr-donut-arc {
+    cursor: pointer;
+    transition:
+      opacity var(--chart-motion-fast, 150ms) ease,
+      translate var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .hr-donut-chart .hr-donut-arc,
   .hr-donut-chart .hr-donut-arc[data-hovered] {
-    transition: opacity 120ms ease;
+    transition:
+      opacity var(--chart-motion-fast, 150ms) ease,
+      translate var(--duration-fast, 250ms) var(--ease-smooth-out);
+  }
+
+  .hr-donut-chart .hr-donut-center-value {
+    fill: var(--foreground, oklch(0.18 0.02 240));
+    font-size: 16px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    transition: opacity 180ms ease;
+  }
+
+  .hr-donut-chart .hr-donut-center-label {
+    fill: var(--chart-label, oklch(0.5 0.01 286));
+    font-size: 11px;
+    transition: opacity 180ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-donut-chart .hr-donut-arc,
+    .hr-donut-chart .hr-donut-arc[data-hovered] {
+      transition: opacity 120ms ease;
+    }
   }
 }

package/src/charts/donut-chart.svelte.d.ts

@@ -0,0 +1,39 @@
+import "./chart-tokens.css";
+import "./donut-chart.css";
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        data: TData[];
+        valueKey: keyof TData & string;
+        labelKey: keyof TData & string;
+        colorKey?: keyof TData & string;
+        height?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        /** Center label shown when nothing is hovered */
+        centerLabel?: string;
+        /** Format the center value */
+        formatValue?: (v: number) => string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<TData extends Record<string, unknown>> = InstanceType<typeof $$Component<TData>>;
+export default $$Component;

package/src/charts/edge-fade.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Mask id. Apply it to the shape with `mask="url(#id)"`. */
+    id: string;
+    /** Fraction of the shape's width faded at each side, 0-0.45. */
+    amount?: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/figure.css

@@ -1,100 +1,113 @@
+@layer theme, base, components, utilities;
+
 /* Styles for Figure. Plain stylesheet (see area-chart.css for why). All
    selectors are already namespaced under `.hr-figure`. */
 
-.hr-figure {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1875rem;
-  min-width: 0;
-}
-.hr-figure[data-align="center"] {
-  align-items: center;
-  text-align: center;
-}
+@layer components {
+  .hr-figure {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1875rem;
+    min-width: 0;
+  }
 
-/* WHY the title truncates: title and pill share one narrow row (the gauge card
-   leaves it ~160px), and a shrunken title box let the word paint over the pill. */
-.hr-figure-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-.hr-figure-title {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  min-width: 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--foreground, oklch(0.2 0.01 286));
-  letter-spacing: -0.005em;
-}
-.hr-figure-title-text {
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.hr-figure-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+  .hr-figure[data-align="center"] {
+    align-items: center;
+    text-align: center;
+  }
 
-.hr-figure-values {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: baseline;
-}
-.hr-figure-value-row {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.375rem;
-}
+  /* WHY the title truncates: title and pill share one narrow row (the gauge card
+     leaves it ~160px), and a shrunken title box let the word paint over the pill. */
+  .hr-figure-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
 
-.hr-figure-value {
-  font-feature-settings: "tnum";
-  line-height: 1.1;
-  transition: color 180ms ease;
-}
-/* md: chart header (monospace, compact). */
-.hr-figure[data-size="md"] .hr-figure-value {
-  font-size: 1.25rem;
-  font-weight: 600;
-  font-family: ui-monospace, SFMono-Regular, monospace;
-}
-/* lg: KPI card headline. */
-.hr-figure[data-size="lg"] .hr-figure-value {
-  font-size: 1.875rem;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: -0.025em;
-  color: var(--foreground, oklch(0.2 0.01 286));
-}
+  .hr-figure-title {
+    display: flex;
+    align-items: center;
+    gap: 0.4375rem;
+    min-width: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--foreground, oklch(0.2 0.01 286));
+    letter-spacing: -0.005em;
+  }
 
-.hr-figure-series-label {
-  font-size: 0.6875rem;
-}
+  .hr-figure-title-text {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-/* The readable form of a series colour: see the note in figure.svelte. The wash
-   and the line keep the raw hue; only text is pulled toward the foreground. */
-.hr-figure-value.is-series,
-.hr-figure-series-label.is-series {
-  color: color-mix(
-    in oklab,
-    var(--hr-series, currentColor) 70%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-}
-.hr-figure-caption {
-  font-size: 0.75rem;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-}
-.hr-figure-eyebrow {
-  font-size: 0.6875rem;
-  color: var(--chart-label, var(--muted-foreground, oklch(0.5 0.01 286)));
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  .hr-figure-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hr-figure-values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: baseline;
+  }
+
+  .hr-figure-value-row {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.375rem;
+  }
+
+  .hr-figure-value {
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    transition: color 180ms ease;
+  }
+
+  /* md: chart header (monospace, compact). */
+  .hr-figure[data-size="md"] .hr-figure-value {
+    font-size: 1.25rem;
+    font-weight: 600;
+    font-family: ui-monospace, SFMono-Regular, monospace;
+  }
+
+  /* lg: KPI card headline. */
+  .hr-figure[data-size="lg"] .hr-figure-value {
+    font-size: 1.875rem;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: -0.025em;
+    color: var(--foreground, oklch(0.2 0.01 286));
+  }
+
+  .hr-figure-series-label {
+    font-size: 0.6875rem;
+  }
+
+  /* The readable form of a series colour: see the note in figure.svelte. The wash
+     and the line keep the raw hue; only text is pulled toward the foreground. */
+  .hr-figure-value.is-series,
+  .hr-figure-series-label.is-series {
+    color: color-mix(
+      in oklab,
+      var(--hr-series, currentColor) 70%,
+      var(--foreground, oklch(0.2 0.01 286))
+    );
+  }
+
+  .hr-figure-caption {
+    font-size: 0.75rem;
+    color: var(--muted-foreground, oklch(0.5 0.01 286));
+  }
+
+  .hr-figure-eyebrow {
+    font-size: 0.6875rem;
+    color: var(--chart-label, var(--muted-foreground, oklch(0.5 0.01 286)));
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
 }

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

@@ -0,0 +1,40 @@
+import "./chart-tokens.css";
+import "./figure.css";
+import type { Snippet } from "svelte";
+type Trend = "up" | "down" | "neutral";
+type SeriesValue = {
+    value: number;
+    label?: string;
+    color?: string;
+};
+interface Props {
+    /** Single metric value. Numbers count up via AnimatedValue. Ignored when `series` is set. */
+    value?: number | string;
+    /** Multiple value rows (chart headers with more than one series). */
+    series?: SeriesValue[];
+    /** Single-value color. */
+    color?: string;
+    /** Title above the value (KPI card). Pairs with `delta` for a trend pill. */
+    title?: string;
+    /** Percentage change; renders a TrendPill beside the title. */
+    delta?: number;
+    trend?: Trend;
+    /** Sub-caption under the value. */
+    caption?: string;
+    /** Uppercase context label under the value (chart headers, e.g. "JUN"). */
+    eyebrow?: string;
+    /** Left header (md, monospace) vs centered overlay reuse later. */
+    align?: "start" | "center";
+    /** Value scale: md = chart header, lg = KPI card. */
+    size?: "md" | "lg";
+    format?: (v: number) => string;
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    animate?: boolean;
+    /** Leading icon before the title. */
+    icon?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/gauge-chart.css

@@ -1,57 +1,85 @@
+@layer theme, base, components, utilities;
+
 /* A plain stylesheet (see area-chart.css), namespaced under `.hr-gauge` because RingChart's
    unscoped `.value`, `.label` and `.center` would otherwise collide. */
 
-.hr-gauge {
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  aspect-ratio: 1;
-  container-type: size;
-}
+@layer components {
+  .hr-gauge {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    aspect-ratio: 1;
+    container-type: size;
+  }
 
-.hr-gauge svg {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
+  .hr-gauge svg {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
 
-.hr-gauge .center {
-  grid-area: 1 / 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.15cqmin;
-  /* WHY: keep the readout inside the inner ring so long values never collide
-	   with the notches. */
-  max-width: 62cqmin;
-  pointer-events: none;
-}
+  .hr-gauge .center {
+    grid-area: 1 / 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.15cqmin;
+    /* WHY: keep the readout inside the inner ring so long values never collide
+  	   with the notches. */
+    max-width: 62cqmin;
+    pointer-events: none;
+  }
 
-.hr-gauge .value {
-  font-size: max(0.78rem, 11cqmin);
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground);
-}
+  .hr-gauge .value {
+    font-size: max(0.78rem, 11cqmin);
+    font-weight: 650;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+  }
 
-.hr-gauge .label {
-  margin-top: 1.5cqmin;
-  font-size: max(0.5rem, 5cqmin);
-  font-weight: 500;
-  white-space: nowrap;
-  color: var(--muted-foreground);
-}
+  .hr-gauge .label {
+    margin-top: 1.5cqmin;
+    font-size: max(0.5rem, 5cqmin);
+    font-weight: 500;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+  }
+
+  /* WHY: active paint comes from the fill attribute (flat or gradient url), so
+     no CSS fill here, which would override it. */
+  .hr-gauge .fill {
+    /* WHY: active notches fade up in arc order, so the gauge reads as filling
+  	   instead of every notch popping in at once. */
+    animation: hr-gauge-notch-in 0.3s var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
+  }
 
-/* WHY: active paint comes from the fill attribute (flat or gradient url), so
-   no CSS fill here, which would override it. */
-.hr-gauge .fill {
-  /* WHY: active notches fade up in arc order, so the gauge reads as filling
-	   instead of every notch popping in at once. */
-  animation: hr-gauge-notch-in 0.3s var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
+  .hr-gauge .ring-track,
+  .hr-gauge .ring-fill {
+    fill: none;
+    stroke-linecap: round;
+  }
+
+  .hr-gauge .ring-fill {
+    stroke-dasharray: 100;
+    transition: stroke-dashoffset var(--chart-motion-slow, 1.1s)
+      var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+    animation: hr-gauge-ring-sweep var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-gauge .fill {
+      animation: none;
+    }
+    .hr-gauge .ring-fill {
+      transition: none;
+      animation: none;
+    }
+  }
 }
 
 @keyframes hr-gauge-notch-in {
@@ -60,32 +88,8 @@
   }
 }
 
-.hr-gauge .ring-track,
-.hr-gauge .ring-fill {
-  fill: none;
-  stroke-linecap: round;
-}
-
-.hr-gauge .ring-fill {
-  stroke-dasharray: 100;
-  transition: stroke-dashoffset var(--chart-motion-slow, 1.1s)
-    var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
-  animation: hr-gauge-ring-sweep var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-}
-
 @keyframes hr-gauge-ring-sweep {
   from {
     stroke-dashoffset: 100;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-gauge .fill {
-    animation: none;
-  }
-  .hr-gauge .ring-fill {
-    transition: none;
-    animation: none;
-  }
-}