@heyramzi/ui 2.23.0 → 3.0.0

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;
-  }
-}

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

@@ -0,0 +1,58 @@
+import "./chart-tokens.css";
+import "./gauge-chart.css";
+interface Props {
+    /** Arc fill, 0-100 (how many notches light up). */
+    value: number;
+    /** "gauge" = notched arc, "ring" = continuous swept arc. */
+    variant?: "gauge" | "ring";
+    /** Show the center value/label. Off when the number sits beside the gauge. */
+    showValue?: boolean;
+    /** Active arc color (CSS color or var). Alias for `activeFill`. */
+    color?: string;
+    /** Single-hue gradient along the active arc. Alias for `useGradient`. */
+    gradient?: boolean;
+    /** Center label under the value. Alias for `defaultLabel`. */
+    label?: string;
+    /** Center statistic. Defaults to `value`. Formatted via `formatOptions`. */
+    centerValue?: number;
+    /** Notch count around the arc. */
+    totalNotches?: number;
+    /** Gap between notches as a percentage of the arc. */
+    spacing?: number;
+    /** Radial depth of the notch band as a percentage of the default. */
+    notchLengthPercent?: number;
+    /** Corner fillet in viewBox units (0 = sharp). Defaults to a soft pill. */
+    notchCornerRadius?: number;
+    /** Rectangular notches instead of angular/tapered. */
+    uniformWidth?: boolean;
+    /** Arc start in degrees (default 135, sweeping to 405 = 270deg with a bottom gap). */
+    startAngle?: number;
+    endAngle?: number;
+    /** Single-hue gradient along the active arc instead of a flat fill. */
+    useGradient?: boolean;
+    /** Hex stops for the active gradient. Defaults to a tonal ramp of `activeFill`. */
+    activeGradient?: [string, string];
+    /** Active notch color (CSS color or var). */
+    activeFill?: string;
+    /** Track notch color. Defaults to `activeFill`. */
+    inactiveFill?: string;
+    activeFillOpacity?: number;
+    inactiveFillOpacity?: number;
+    /** Center label under the value. */
+    defaultLabel?: string;
+    /** Intl formatting for the center value. */
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    prefix?: string;
+    suffix?: string;
+    /** Fixed square size in px. Omit to fill the parent (responsive). */
+    size?: number;
+    /** Minimum width when responsive. */
+    minWidth?: number;
+    /** Accessible description, e.g. "ARR run rate". */
+    ariaLabel?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/hover-focus.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** The series: dims while a point is hovered. */
+    children: Snippet;
+    /** The strokes alone, redrawn at full strength around the hovered point. */
+    segment: Snippet;
+    /** Headroom above and below the plot so a thick stroke is not cut. */
+    bleed?: number;
+    /** How far the band reaches each side of the point, as a share of the gap to its neighbour. */
+    reach?: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/legend.css

@@ -1,123 +1,134 @@
+@layer theme, base, components, utilities;
+
 /* Styles for Legend. Plain stylesheet (see area-chart.css for why). Selectors
    are namespaced under `.hr-legend`; the `.horizontal` layout modifier sits on
    the same root element. */
 
-.hr-legend {
-  width: 100%;
-  font-size: 0.8125rem;
-}
-
-.hr-legend-title {
-  margin: 0 0 0.625rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--foreground);
-}
+@layer components {
+  .hr-legend {
+    width: 100%;
+    font-size: 0.8125rem;
+  }
 
-.hr-legend-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
+  .hr-legend-title {
+    margin: 0 0 0.625rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--foreground);
+  }
 
-.hr-legend.horizontal .hr-legend-items {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-}
+  .hr-legend-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
 
-.hr-legend-item {
-  width: 100%;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 0.5rem 0.625rem;
-  padding: 0.375rem 0.5rem;
-  border: 0;
-  border-radius: 0.5rem;
-  background: transparent;
-  font: inherit;
-  color: var(--foreground);
-  text-align: left;
-  cursor: pointer;
-  transition:
-    background 160ms ease,
-    opacity 160ms ease;
-}
+  .hr-legend.horizontal .hr-legend-items {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem 1rem;
+  }
 
-.hr-legend.horizontal .hr-legend-item {
-  width: auto;
-  grid-template-columns: auto auto;
-  padding: 0.25rem 0.375rem;
-}
+  .hr-legend-item {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 0.5rem 0.625rem;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: transparent;
+    font: inherit;
+    color: var(--foreground);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background 160ms ease,
+      opacity 160ms ease;
+  }
 
-.hr-legend-item:focus-visible {
-  background: var(--muted);
-  outline: none;
-}
+  .hr-legend.horizontal .hr-legend-item {
+    width: auto;
+    grid-template-columns: auto auto;
+    padding: 0.25rem 0.375rem;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .hr-legend-item:hover {
+  .hr-legend-item:focus-visible {
     background: var(--muted);
+    outline: none;
   }
-}
 
-.hr-legend-item.dimmed {
-  opacity: 0.4;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .hr-legend-item:hover {
+      background: var(--muted);
+    }
+  }
 
-.hr-legend-marker {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
+  .hr-legend-item.dimmed {
+    opacity: 0.4;
+  }
 
-.hr-legend-label {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .hr-legend-marker {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
 
-.hr-legend-value {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.3125rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground);
-  white-space: nowrap;
-}
+  .hr-legend-label {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-.hr-legend-pct {
-  font-size: 0.6875rem;
-  color: var(--muted-foreground);
-}
+  .hr-legend-value {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.3125rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+    white-space: nowrap;
+  }
 
-.hr-legend-track {
-  grid-column: 1 / -1;
-  height: 0.375rem;
-  border-radius: 999px;
-  background: var(--muted);
-  overflow: hidden;
-}
+  .hr-legend-pct {
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+  }
 
-.hr-legend-bar {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 999px;
-  /* WHY: scaleX from the left avoids the layout thrash of animating width;
-	   the bar's fill fraction is set inline as --hr-bar-scale. */
-  transform-origin: left center;
-  transform: scaleX(var(--hr-bar-scale, 0));
-  animation: hr-legend-fill var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-  transition: transform var(--chart-motion-slow, 1.1s)
-    var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+  .hr-legend-track {
+    grid-column: 1 / -1;
+    height: 0.375rem;
+    border-radius: 999px;
+    background: var(--muted);
+    overflow: hidden;
+  }
+
+  .hr-legend-bar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 999px;
+    /* WHY: scaleX from the left avoids the layout thrash of animating width;
+  	   the bar's fill fraction is set inline as --hr-bar-scale. */
+    transform-origin: left center;
+    transform: scaleX(var(--hr-bar-scale, 0));
+    animation: hr-legend-fill var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+    transition: transform var(--chart-motion-slow, 1.1s)
+      var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-legend-bar {
+      animation: none;
+      transition: none;
+    }
+  }
 }
 
 @keyframes hr-legend-fill {
@@ -125,10 +136,3 @@
     transform: scaleX(0);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-legend-bar {
-    animation: none;
-    transition: none;
-  }
-}

package/src/charts/legend.svelte

@@ -32,7 +32,7 @@
 		formatPercentage?: (p: number) => string;
 		/** Hovered index, bindable for chart hover-sync. */
 		hoveredIndex?: number | null;
-		onHoverChange?: (index: number | null) => void;
+		onHoveredIndexChange?: (index: number | null) => void;
 		class?: string;
 	}
 
@@ -49,7 +49,7 @@
 		formatValue = (v) => v.toLocaleString(),
 		formatPercentage = (p) => `${p.toFixed(0)}%`,
 		hoveredIndex = $bindable(null),
-		onHoverChange,
+		onHoveredIndexChange,
 		class: className,
 	}: Props = $props();
 
@@ -63,7 +63,7 @@
 
 	function setHover(index: number | null) {
 		hoveredIndex = index;
-		onHoverChange?.(index);
+		onHoveredIndexChange?.(index);
 	}
 </script>
 

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

@@ -0,0 +1,30 @@
+import "./chart-tokens.css";
+import "./legend.css";
+type LegendItem = {
+    label: string;
+    value: number;
+    /** Required when `showProgress` or `showPercentage` is set. */
+    maxValue?: number;
+    color: string;
+};
+interface Props {
+    items: LegendItem[];
+    title?: string;
+    /** Stacked rows vs inline wrap. */
+    layout?: "vertical" | "horizontal";
+    /** Render a progress bar under each row (needs maxValue). */
+    showProgress?: boolean;
+    /** Show the value beside each label. */
+    showValue?: boolean;
+    /** Append a percentage (needs maxValue). */
+    showPercentage?: boolean;
+    formatValue?: (v: number) => string;
+    formatPercentage?: (p: number) => string;
+    /** Hovered index, bindable for chart hover-sync. */
+    hoveredIndex?: number | null;
+    onHoveredIndexChange?: (index: number | null) => void;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "hoveredIndex">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/line-chart.css

@@ -1,26 +1,32 @@
+@layer theme, base, components, utilities;
+
 /* Styles for LineChart. Plain stylesheet (see area-chart.css for why). Selectors
    are namespaced under `.hr-line-chart`. */
 
-.hr-line-chart {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.hr-line-chart .hr-chart-body {
-  width: 100%;
-}
+@layer components {
+  .hr-line-chart {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 
-.hr-line-chart .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
-  border-radius: 0.5rem;
-}
-.hr-line-chart .empty p {
-  font-size: 0.8125rem;
-  color: var(--chart-label, oklch(0.5 0.01 286));
-  margin: 0;
+  .hr-line-chart .hr-chart-body {
+    width: 100%;
+  }
+
+  .hr-line-chart .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+    border-radius: 0.5rem;
+  }
+
+  .hr-line-chart .empty p {
+    font-size: 0.8125rem;
+    color: var(--chart-label, oklch(0.5 0.01 286));
+    margin: 0;
+  }
 }