aplance-ui 1.1.0 → 1.2.0

package/registry/components/ui/chart/chart.module.css

@@ -1,14 +1,15 @@
 /* ── Container card ───────────────────────────────────────────── */
-.card {
-  width: 100%;
-  background-color: var(--color-background);
-  border: var(--border-1) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-7);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+.card {
+  width: 100%;
+  min-width: 0;
+  background-color: var(--color-background);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  padding: var(--spacing-6);
+}
 
 .header {
   display: flex;
@@ -29,18 +30,19 @@
   color: var(--color-muted-foreground);
 }
 
-.canvas {
-  width: 100%;
-  position: relative;
-}
+.canvas {
+  width: 100%;
+  min-width: 0;
+  position: relative;
+}
 
-.plot {
-  width: 100%;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-5);
-}
+.plot {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
 
 .plot :global(.recharts-cartesian-axis-tick-value) {
   font-variant-numeric: tabular-nums;
@@ -70,10 +72,11 @@
 /* Match the page surface so series colors (designed against the page bg)
    stay readable inside the tooltip. Border defines the floating edge
    without relying on shadow alone. */
-.tooltip {
-  min-width: 10rem;
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+.tooltip {
+  min-width: 10rem;
+  max-width: min(18rem, calc(100vw - var(--spacing-8)));
+  background-color: var(--color-background);
+  color: var(--color-foreground);
   border: var(--border-1) solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--spacing-4) var(--spacing-5);
@@ -86,55 +89,68 @@
   margin-bottom: var(--spacing-2);
 }
 
-.tooltip_row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  font-size: var(--font-size-xs);
+.tooltip_row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-xs);
+  min-width: 0;
 
   &:not(:last-child) {
     margin-bottom: var(--spacing-2);
   }
 }
 
-.tooltip_dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
-
-.tooltip_value {
-  margin-left: auto;
-  font-weight: var(--font-weight-semibold);
-  padding-left: var(--spacing-3);
-  font-variant-numeric: tabular-nums;
-}
+.tooltip_dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-background) 84%, transparent);
+}
+
+.tooltip_value {
+  margin-left: auto;
+  font-weight: var(--font-weight-semibold);
+  padding-left: var(--spacing-3);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
 
 /* ── Legend (shared across all chart types) ──────────────────── */
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-3) var(--spacing-6);
-  justify-content: center;
-}
-
-.legend_item {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-}
-
-.legend_dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-3) var(--spacing-5);
+  justify-content: center;
+  min-width: 0;
+}
+
+.legend_item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-muted-foreground);
+  line-height: 1.2;
+}
+
+.legend_dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-background) 84%, transparent);
+}
+
+.legend_item > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .center_overlay {
   position: absolute;
@@ -151,10 +167,10 @@
 }
 
 @media (width <= 600px) {
-  .card {
-    padding: var(--spacing-5);
-    gap: var(--spacing-5);
-  }
+  .card {
+    gap: var(--spacing-5);
+    padding: var(--spacing-5);
+  }
 
   .tooltip {
     min-width: 8rem;

package/registry/components/ui/chart/chart.tsx

@@ -77,9 +77,7 @@ export type {
 // ─── Constants ────────────────────────────────────────────────────────────────
 
 const DEFAULT_CHART_HEIGHT = 260;
-// left is intentionally negative: pulls Y-axis labels into the card's padding
-// so the visible whitespace on both sides feels balanced.
-const CARTESIAN_MARGIN = { top: 10, right: 10, bottom: 10, left: -8 } as const;
+const CARTESIAN_MARGIN = { top: 8, right: 12, bottom: 4, left: 0 } as const;
 const YAXIS_WIDTH = 56;
 const YAXIS_WIDTH_HORIZONTAL = 80;
 const BAR_TOP_RADIUS: [number, number, number, number] = [6, 6, 0, 0];
@@ -114,6 +112,8 @@ type ChartTooltipProps = {
   // a single dataKey across all sectors), read the row label from the original
   // datum at this key so the tooltip shows "Aarav" instead of the dataKey.
   nameKey?: string;
+  /** Read a per-datum color from tooltip payload before falling back to series color. */
+  colorKey?: string;
 };
 
 type CartesianRenderOptions = {
@@ -160,6 +160,37 @@ type LegendItem = { key: string; label: string; color: string };
 const toLegendItems = (series: PreparedSeries[]): LegendItem[] =>
   series.map(({ key, label, color }) => ({ key, label, color }));
 
+const toCategoryLegendItems = ({
+  data,
+  categoryKey,
+  colors,
+  fallbackColor,
+}: {
+  data: ChartDatum[];
+  categoryKey: string;
+  colors?: Record<string, string>;
+  fallbackColor: string;
+}): LegendItem[] => {
+  const seen = new Set<string>();
+  const items: LegendItem[] = [];
+
+  for (const entry of data) {
+    const rawLabel = entry[categoryKey];
+    const label = String(rawLabel ?? "Unknown");
+    const lookup = toLookupKey(rawLabel);
+    if (seen.has(lookup)) continue;
+
+    seen.add(lookup);
+    items.push({
+      key: lookup || label,
+      label,
+      color: resolveColorToken(colors?.[lookup], fallbackColor),
+    });
+  }
+
+  return items;
+};
+
 // ─── Option resolution ────────────────────────────────────────────────────────
 
 const resolveCartesianOptions = (opts: CartesianRenderOptions) => ({
@@ -311,6 +342,11 @@ const formatTooltipValue = (value: TooltipValue): string => {
   return String(value);
 };
 
+const toFiniteNumber = (value: unknown, fallback = 0) => {
+  const number = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(number) ? number : fallback;
+};
+
 const formatTooltipEntryValue = (
   value: TooltipValue,
   valueFormatter: TooltipValueFormatter | undefined,
@@ -331,6 +367,25 @@ const formatTooltipLabel = (
   return String(label);
 };
 
+const payloadString = (
+  payload: Record<string, unknown> | undefined,
+  key: string,
+) => {
+  const value = payload?.[key];
+  return typeof value === "string" && value.trim() ? value : undefined;
+};
+
+const resolveTooltipColor = (
+  entry: TooltipPayloadItem,
+  colorKey: string | undefined,
+) =>
+  (colorKey ? payloadString(entry.payload, colorKey) : undefined) ??
+  payloadString(entry.payload, "__color") ??
+  payloadString(entry.payload, "fill") ??
+  payloadString(entry.payload, "stroke") ??
+  entry.color ??
+  "var(--color-muted-foreground)";
+
 function ChartTooltip({
   active,
   payload,
@@ -338,6 +393,7 @@ function ChartTooltip({
   valueFormatter,
   labelFormatter,
   nameKey,
+  colorKey,
 }: ChartTooltipProps) {
   if (!active || !payload?.length) return null;
 
@@ -354,7 +410,10 @@ function ChartTooltip({
             key={`${entry.dataKey ?? entry.name ?? "value"}-${index}`}
             className={s.tooltip_row}
           >
-            <span className={s.tooltip_dot} style={{ backgroundColor: entry.color }} />
+            <span
+              className={s.tooltip_dot}
+              style={{ backgroundColor: resolveTooltipColor(entry, colorKey) }}
+            />
             <span>{String(rowName)}</span>
             <span className={s.tooltip_value}>
               {formatTooltipEntryValue(entry.value, valueFormatter, {
@@ -373,11 +432,11 @@ function ChartTooltip({
 
 function ChartLegend({ items }: { items: LegendItem[] }) {
   return (
-    <div className={s.legend}>
-      {items.map((item) => (
-        <div key={item.key} className={s.legend_item}>
+    <div className={s.legend} aria-label="Chart legend">
+      {items.map((item, index) => (
+        <div key={`${item.key}-${index}`} className={s.legend_item}>
           <span className={s.legend_dot} style={{ backgroundColor: item.color }} />
-          <span>{item.label}</span>
+          <span title={item.label}>{item.label}</span>
         </div>
       ))}
     </div>
@@ -394,6 +453,7 @@ const renderCartesianFrame = ({
   options,
   axisConfig,
   tooltipCursor,
+  tooltipColorKey,
   orientation = "vertical",
 }: {
   categoryKey: string;
@@ -401,6 +461,7 @@ const renderCartesianFrame = ({
   options: ResolvedCartesianOptions;
   axisConfig: AxisRenderConfig;
   tooltipCursor: TooltipCursor;
+  tooltipColorKey?: string;
   orientation?: "vertical" | "horizontal";
 }): ReactNode[] => {
   const isHorizontal = orientation === "horizontal";
@@ -496,6 +557,7 @@ const renderCartesianFrame = ({
           <ChartTooltip
             valueFormatter={options.tooltipValueFormatter}
             labelFormatter={options.tooltipLabelFormatter}
+            colorKey={tooltipColorKey}
           />
         }
         cursor={tooltipCursor}
@@ -579,14 +641,30 @@ function BarChartRenderer({
   const topStackSeriesKeys = resolveStackTopSeriesKeys(preparedSeries);
   const usesCategoryColorMap =
     preparedSeries.length === 1 && !series?.length && Boolean(colors);
-  const legendItems = toLegendItems(preparedSeries);
+  const legendItems = usesCategoryColorMap
+    ? toCategoryLegendItems({
+        data,
+        categoryKey,
+        colors,
+        fallbackColor: preparedSeries[0]?.color ?? palette.primary,
+      })
+    : toLegendItems(preparedSeries);
   const isHorizontal = orientation === "horizontal";
+  const chartData: Array<ChartDatum & { __color?: string }> = usesCategoryColorMap
+    ? data.map((entry) => {
+        const key = toLookupKey(entry[categoryKey]);
+        return {
+          ...entry,
+          __color: resolveColorToken(colors?.[key], preparedSeries[0]?.color ?? palette.primary),
+        };
+      })
+    : data;
 
   return (
     <>
       <ResponsiveContainer width="100%" height={height}>
         <RechartsBarChart
-          data={data}
+          data={chartData}
           layout={isHorizontal ? "vertical" : "horizontal"}
           margin={CARTESIAN_MARGIN}
           {...(barCategoryGap !== undefined ? { barCategoryGap } : {})}
@@ -597,6 +675,7 @@ function BarChartRenderer({
             options,
             axisConfig,
             tooltipCursor: { fill: palette.cursor },
+            tooltipColorKey: usesCategoryColorMap ? "__color" : undefined,
             orientation,
           })}
 
@@ -612,9 +691,10 @@ function BarChartRenderer({
               yAxisId={options.showYAxis ? item.yAxisId : undefined}
             >
               {usesCategoryColorMap &&
-                data.map((entry, index) => {
+                chartData.map((entry, index) => {
                   const key = toLookupKey(entry[categoryKey]);
-                  const fill = resolveColorToken(colors?.[key], item.color);
+                  const fill =
+                    typeof entry.__color === "string" ? entry.__color : item.color;
                   return <Cell key={`${item.key}-${key}-${index}`} fill={fill} />;
                 })}
             </Bar>
@@ -967,29 +1047,28 @@ function DonutChartRenderer({
 }: DonutChartProps & { height: number }) {
   const palette = createChartPalette();
 
-  const chartData = data.map((entry) => ({
-    ...entry,
-    __chartValue:
-      typeof entry[dataKey] === "number"
-        ? (entry[dataKey] as number)
-        : Number(entry[dataKey] ?? 0) || 0,
-  }));
-
-  const legendItems: LegendItem[] = data.map((entry, index) => {
+  const chartData = data.map((entry, index) => {
     const rawLabel = entry[nameKey];
     const label =
       rawLabel !== undefined && rawLabel !== null && tooltipLabelFormatter
         ? tooltipLabelFormatter(rawLabel as string | number)
         : String(rawLabel ?? `Item ${index + 1}`);
     const lookup = toLookupKey(rawLabel);
+    const color = resolveColorToken(colors?.[lookup], pickSeriesColor(palette, index));
     return {
-      key: label,
-      label,
-      // Fix: use series color rotation, not palette.muted, for uncolored segments
-      color: resolveColorToken(colors?.[lookup], pickSeriesColor(palette, index)),
+      ...entry,
+      __chartValue: Math.max(0, toFiniteNumber(entry[dataKey])),
+      __color: color,
+      __label: label,
     };
   });
 
+  const legendItems: LegendItem[] = chartData.map((entry) => ({
+    key: entry.__label,
+    label: entry.__label,
+    color: entry.__color,
+  }));
+
   const resolvedOuterRadius = Math.max(outerRadius ?? Math.max(height * 0.34, 88), 36);
   const resolvedInnerRadius = Math.max(
     16,
@@ -1024,6 +1103,8 @@ function DonutChartRenderer({
                 <ChartTooltip
                   valueFormatter={tooltipValueFormatter}
                   labelFormatter={tooltipLabelFormatter}
+                  nameKey="__label"
+                  colorKey="__color"
                 />
               }
             />
@@ -1065,9 +1146,7 @@ function RadialBarChartRenderer({
     const lookup = toLookupKey(rawLabel);
     const color = resolveColorToken(colors?.[lookup], pickSeriesColor(palette, index));
     const value =
-      typeof entry[dataKey] === "number"
-        ? (entry[dataKey] as number)
-        : Number(entry[dataKey] ?? 0) || 0;
+      Math.max(0, toFiniteNumber(entry[dataKey]));
     return {
       ...entry,
       __value: value,
@@ -1082,7 +1161,10 @@ function RadialBarChartRenderer({
     color: item.__color,
   }));
 
-  const domainMax = maxValue ?? Math.max(...chartData.map((d) => d.__value), 1);
+  const domainMax =
+    typeof maxValue === "number" && Number.isFinite(maxValue) && maxValue > 0
+      ? maxValue
+      : Math.max(...chartData.map((d) => d.__value), 1);
 
   return (
     <>
@@ -1111,7 +1193,8 @@ function RadialBarChartRenderer({
                 <ChartTooltip
                   valueFormatter={tooltipValueFormatter}
                   labelFormatter={tooltipLabelFormatter}
-                  nameKey={nameKey}
+                  nameKey="__label"
+                  colorKey="__color"
                 />
               }
             />
@@ -1228,7 +1311,10 @@ const EMPTY_STATE_GRACE_MS = 150;
 
 export function Chart(props: ChartProps) {
   const { title, description, className, emptyMessage, isLoading = false } = props;
-  const height = props.height ?? DEFAULT_CHART_HEIGHT;
+  const height =
+    typeof props.height === "number" && Number.isFinite(props.height)
+      ? Math.max(120, props.height)
+      : DEFAULT_CHART_HEIGHT;
 
   const isEmpty =
     props.type === "scatter"

package/registry/components/ui/input-fields/common/input-field-common.module.css

@@ -1,7 +1,4 @@
-/* This file contains basic / common heirarchy for all input fields */
-
-/* contains form field (with label) and field message (errors info etc.) */
-.container {
+.container {
   width: 100%;
   min-width: fit-content;
   display: flex;
@@ -17,8 +14,7 @@
   }
 }
 
-/* contains form field elements like label etc... */
-.field_container {
+.field_container {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -35,8 +31,7 @@
     gap: var(--spacing-2);
   }
 
-  /* layout */
-  &.inline {
+  &.inline {
     flex-direction: row;
     align-items: center;
     gap: var(--spacing-3);
@@ -44,17 +39,13 @@
 
     .label {
       flex-direction: column;
-      /* margin-inline: unset; */
-    }
-
-    /* direction */
-    &.rev {
-      flex-direction: row-reverse;
-
-      /* due to reverse direction it will become flex-end */
-      justify-content: flex-end;
-    }
-  }
+    }
+
+    &.rev {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+    }
+  }
 
   /* layout: centered - column-stacked with horizontally centered control + label. */
   &.centered {
@@ -66,8 +57,7 @@
     }
   }
 
-  /* layout */
-  &.inline_justify {
+  &.inline_justify {
     flex-direction: row;
     align-items: center;
     gap: var(--spacing-3);
@@ -83,8 +73,7 @@
       /* margin-inline: unset; */
     }
 
-    /* direction */
-    &.rev {
+    &.rev {
       flex-direction: row-reverse;
 
       .field_wrapper {
@@ -115,8 +104,7 @@
   align-self: center;
 }
 
-/* mostly for positining to set icons inside input fields */
-.field_wrapper {
+.field_wrapper {
   --field-content-color: var(--color-foreground);
   --field-placeholder-color: var(--color-muted-foreground);
   --field-icon-color: var(--color-secondary-foreground);
@@ -125,12 +113,11 @@
   position: relative;
   display: inline-flex;
 
-  /* Action Padding Mathematics Metrics */
-  --action-inset: var(--spacing-5); /* Exact match for right: var(--spacing-5) */
-  --action-icon: var(--spacing-8); /* Safe optical width for 24px SVGs */
-  --action-gap: var(--spacing-2); /* Exact match for flex gap */
-  --action-clearance: var(--spacing-3); /* Crisp 6px optical breathing room */
-}
+  --action-inset: var(--spacing-5);
+  --action-icon: var(--spacing-8);
+  --action-gap: var(--spacing-2);
+  --action-clearance: var(--spacing-3);
+}
 
 .field_wrapper_variant {
   --field-content-color: var(--button-fg, var(--color-foreground));
@@ -141,8 +128,7 @@
   --field-icon-color: var(--button-icon, var(--field-content-color));
 }
 
-/* icons wrapped in span at start like search etc... */
-.icon_start {
+.icon_start {
   width: fit-content;
   position: absolute;
   top: 50%;
@@ -156,8 +142,7 @@
   color: var(--field-icon-color);
 }
 
-/* action buttons at end like cross password eyes etc... */
-.action_end_wrapper {
+.action_end_wrapper {
   width: fit-content;
   display: flex;
   align-items: center;
@@ -169,34 +154,26 @@
   flex-shrink: 0;
   --icon-color: var(--field-icon-color);
   color: var(--field-icon-color);
-
-  /* icons */
-}
-
-/* default style */
-.field_default {
-  /* layout */
-  width: 100%;
-  min-height: var(--spacing-11);
-
-  /* typography */
-  font-family: var(--font-family-1);
-  font-size: var(--font-size-sm);
-  color: var(--field-content-color);
+}
+
+.field_default {
+  width: 100%;
+  min-height: var(--spacing-11);
+
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  color: var(--field-content-color);
   text-align: start;
   vertical-align: middle;
 
-  /* necessary */
-  line-height: 1.125;
-
-  /* visual */
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-3);
-  padding-left: var(--spacing-6);
-  padding-right: var(--spacing-6);
-
-  /* display */
-  display: flex;
+  line-height: 1.125;
+
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-3);
+  padding-left: var(--spacing-6);
+  padding-right: var(--spacing-6);
+
+  display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: var(--spacing-4);
@@ -206,8 +183,7 @@
   outline: none;
   background-color: var(--color-muted);
 
-  /* interaction */
-  transition:
+  transition:
     border-color var(--transition-base),
     box-shadow var(--transition-base),
     background-color var(--transition-base);
@@ -231,9 +207,7 @@
     cursor: not-allowed;
     opacity: 0.5;
   }
-
-  /* we need to adjust paddings of input or select fields inline dynamically due to icons at start and ends */
-}
+}
 
 .field_button_variant {
   color: var(--field-content-color);