aplance-ui 1.1.1 → 1.2.1

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/media-input/media-input.module.css

@@ -92,6 +92,7 @@
 
 .dropzone_inner {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -107,24 +108,30 @@
 
 .dropzone_copy {
   display: flex;
+  max-width: 100%;
+  min-width: 0;
   flex-direction: column;
   gap: var(--spacing-2);
   align-items: center;
 }
 
 .dropzone_title {
+  max-width: 100%;
   font-family: var(--font-family-1);
   font-size: var(--font-size-sm);
   color: var(--field-content-color, var(--color-foreground));
   font-weight: 500;
   line-height: 1.3;
+  overflow-wrap: anywhere;
 }
 
 .dropzone_hint {
+  max-width: 100%;
   font-family: var(--font-family-1);
   font-size: var(--font-size-xs);
   color: var(--field-placeholder-color, var(--color-muted-foreground));
   line-height: 1.4;
+  overflow-wrap: anywhere;
 }
 
 /* ── Preview list ─────────────────────────────────────────────────────── */
@@ -272,18 +279,23 @@
 
 .preview_sub {
   display: inline-flex;
+  min-width: 0;
   align-items: center;
   gap: var(--spacing-1);
   font-family: var(--font-family-1);
   font-size: var(--font-size-xs);
   color: var(--color-muted-foreground);
   line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .preview_error {
   font-family: var(--font-family-1);
   font-size: var(--font-size-xs);
   color: var(--color-error-foreground);
+  overflow-wrap: anywhere;
 }
 
 /* Position only - visuals come from the Button component (variant + size + box layout). */

package/registry/components/ui/input-fields/media-input/media-input.tsx

@@ -109,15 +109,12 @@ export const MediaInput = (props: MediaInputProps) => {
   const resolvedTitle =
     dropzoneTitle ??
     (multiple ? "Drop files here or browse" : "Drop a file here or browse");
-  const resolvedHint =
-    dropzoneHint ??
-    [
-      accept ? `Accepts ${accept}` : null,
-      maxSize ? `Up to ${formatBytes(maxSize)} per file` : null,
-      multiple && maxFiles ? `Max ${maxFiles} files` : null,
-    ]
-      .filter(Boolean)
-      .join(" • ");
+  const hintParts = [
+    accept ? `Accepts ${accept}` : null,
+    maxSize ? `Up to ${formatBytes(maxSize)} per file` : null,
+    multiple && maxFiles ? `Max ${maxFiles} files` : null,
+  ].filter(Boolean);
+  const resolvedHint = dropzoneHint ?? hintParts.join(" - ");
 
   const inputProps = getInputProps({
     id: inputId,
@@ -210,6 +207,10 @@ export const MediaInput = (props: MediaInputProps) => {
     "aria-labelledby": label ? labelId : undefined,
     "aria-describedby": resolvedHint ? hintId : undefined,
     onClick: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDragEnter: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDragLeave: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDragOver: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDrop: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
   });
 
   return (

package/registry/components/ui/input-fields/media-input/useMediaUpload.tsx

@@ -96,6 +96,12 @@ export function useMediaUpload({
     filesRef.current = isControlled ? value! : internal;
   }, [isControlled, value, internal]);
 
+  useEffect(() => {
+    if (!disabled && !readOnly) return;
+    dragCounter.current = 0;
+    setIsDragging(false);
+  }, [disabled, readOnly]);
+
   // Revoke any preview URLs the hook created on unmount so blob memory is
   // freed even if the consumer forgets to clear state.
   useEffect(
@@ -130,8 +136,11 @@ export function useMediaUpload({
         existing: baseExisting,
       });
 
-      // Single-mode replacement frees the previous preview blob immediately.
-      if (!multiple && existing.length > 0) existing.forEach(revokePreviewUrl);
+      // Single-mode replacement frees the previous preview blob immediately,
+      // but only after a valid replacement exists.
+      if (!multiple && accepted.length > 0 && existing.length > 0) {
+        existing.forEach(revokePreviewUrl);
+      }
 
       const next = multiple ? [...existing, ...accepted] : accepted;
       if (accepted.length > 0) {
@@ -162,6 +171,7 @@ export function useMediaUpload({
       revokePreviewUrl(target);
       const next = filesRef.current.filter((f) => f.id !== id);
       commit(next);
+      setRejections([]);
       onRemove?.(target);
     },
     [commit, disabled, onRemove, readOnly],
@@ -190,9 +200,9 @@ export function useMediaUpload({
 
   const handleDragEnter = useCallback(
     (e: DragEvent) => {
-      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
+      if (disabled || readOnly) return;
       dragCounter.current += 1;
       if (e.dataTransfer?.types?.includes("Files")) setIsDragging(true);
     },
@@ -208,9 +218,9 @@ export function useMediaUpload({
 
   const handleDragOver = useCallback(
     (e: DragEvent) => {
-      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
+      if (disabled || readOnly) return;
       if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
     },
     [disabled, readOnly],
@@ -218,11 +228,11 @@ export function useMediaUpload({
 
   const handleDrop = useCallback(
     (e: DragEvent) => {
-      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
       dragCounter.current = 0;
       setIsDragging(false);
+      if (disabled || readOnly) return;
       add(e.dataTransfer?.files);
     },
     [add, disabled, readOnly],
@@ -247,18 +257,22 @@ export function useMediaUpload({
       },
       onDragEnter: (e) => {
         overrides.onDragEnter?.(e);
+        if (e.defaultPrevented) return;
         handleDragEnter(e);
       },
       onDragLeave: (e) => {
         overrides.onDragLeave?.(e);
+        if (e.defaultPrevented) return;
         handleDragLeave(e);
       },
       onDragOver: (e) => {
         overrides.onDragOver?.(e);
+        if (e.defaultPrevented) return;
         handleDragOver(e);
       },
       onDrop: (e) => {
         overrides.onDrop?.(e);
+        if (e.defaultPrevented) return;
         handleDrop(e);
       },
     }),