@nadicodeai/ui 12.1.98 → 12.1.99

package/dist/components/chart-bar-horizontal.d.ts

@@ -11,7 +11,7 @@ declare function signedAxis(data: readonly Record<string, number | string>[], va
  * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
  * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
  * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
- * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: every category keeps its label on one line, a long one cut with an ellipsis and whole in the tooltip.
  */
 declare function ChartBarHorizontal({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter, axisFormatter, emptyState, size, className, }: Omit<ChartCardProps, "series" | "entityColorMap" | "otherLabel"> & {
     valueKey: string;

package/dist/components/chart-bar-horizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAOjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA4GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAsBjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA8GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chart-bar-horizontal.js

@@ -1,7 +1,7 @@
 // Pulled from the shadcn registry item `chart-bar-horizontal`.
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, ReferenceLine, Text, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
 import { niceAxisMax, niceAxisTicks, niceStep } from "./chart-axis.js";
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, defaultValueFormatter, } from "./chart-card.js";
@@ -9,6 +9,13 @@ const POSITIVE_KEY = "__positive";
 const NEGATIVE_KEY = "__negative";
 const POSITIVE_BAR_COLOR = "var(--success)";
 const NEGATIVE_BAR_COLOR = "var(--destructive)";
+/**
+ * Recharts keeps only SVG attributes from a `tick` object, so `maxLines` reaches
+ * its `Text` only through a tick it renders: one line, cut with an ellipsis.
+ */
+function CategoryTick({ payload, ...props }) {
+    return (_jsx(Text, { ...props, maxLines: 1, children: payload.value }));
+}
 function signedAxis(data, valueKey) {
     const values = data.flatMap((datum) => {
         const value = datum[valueKey];
@@ -46,7 +53,7 @@ function signedAxis(data, valueKey) {
  * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
  * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
  * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
- * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: every category keeps its label on one line, a long one cut with an ellipsis and whole in the tooltip.
  */
 function ChartBarHorizontal({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
     const axis = signedAxis(data, valueKey);
@@ -64,7 +71,7 @@ function ChartBarHorizontal({ title, period, controls, summary, aside, footer, h
         [POSITIVE_KEY]: { label: positiveLabel, color: POSITIVE_BAR_COLOR },
         [NEGATIVE_KEY]: { label: negativeLabel, color: NEGATIVE_BAR_COLOR },
     };
-    return (_jsx(ChartCard, { title: title, period: period, controls: controls, summary: summary, aside: aside, ...(footer ? { footer } : {}), ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: signedData, layout: "vertical", margin: { left: 8, right: 16 }, children: [_jsx(CartesianGrid, { horizontal: false, strokeDasharray: "3 3" }), _jsx(XAxis, { type: "number", domain: axis.domain, ticks: axis.ticks, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(YAxis, { type: "category", dataKey: xKey, width: 112, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(ReferenceLine, { x: 0, stroke: "var(--border)", strokeWidth: 1.5 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", labelFormatter: (_label, payload) => {
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, summary: summary, aside: aside, ...(footer ? { footer } : {}), ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: signedData, layout: "vertical", margin: { left: 8, right: 16 }, children: [_jsx(CartesianGrid, { horizontal: false, strokeDasharray: "3 3" }), _jsx(XAxis, { type: "number", domain: axis.domain, ticks: axis.ticks, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(YAxis, { type: "category", dataKey: xKey, width: 112, interval: 0, tick: CategoryTick, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(ReferenceLine, { x: 0, stroke: "var(--border)", strokeWidth: 1.5 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", labelFormatter: (_label, payload) => {
                                 const exact = categoryDisplayKey
                                     ? payload?.[0]?.payload?.[categoryDisplayKey]
                                     : undefined;

package/dist/showcase/usage.generated.js

@@ -1486,7 +1486,7 @@ export const USAGE = [
         instead: "Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.",
         behaviour: "Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.",
         words: "The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.",
-        access: "Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue.",
+        access: "Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: every category keeps its label on one line, a long one cut with an ellipsis and whole in the tooltip.",
     },
     {
         name: "ChartBarMultiple",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.98",
+  "version": "12.1.99",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -80,7 +80,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.2",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.98",
+    "@nadicodeai/design-system": "12.1.99",
     "@tanstack/react-table": "^9.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",