kaleido-ui 0.2.4 → 0.2.5

package/dist/web/icons/public.js

@@ -17,6 +17,7 @@ import "../chunk-OWSKP527.js";
 import {
   IconGlyph
 } from "../chunk-YQQ7GDLZ.js";
+import "../chunk-PMGIJMRO.js";
 import {
   AccountBalanceWallet,
   Add,
@@ -127,7 +128,6 @@ import {
   VisibilityOff,
   Warning
 } from "../chunk-XXH4TYKZ.js";
-import "../chunk-PMGIJMRO.js";
 export {
   AccountBalanceWallet,
   AccountBalanceWalletFilled,

package/dist/web/index.cjs

@@ -11822,6 +11822,7 @@ function BarList({
   max,
   sort = "none",
   showPercent = true,
+  labelWidth,
   empty,
   className,
   ...head
@@ -11832,40 +11833,54 @@ function BarList({
   const sum = rows.reduce((acc, item) => acc + Math.max(0, item.value), 0);
   const percentOf = (item) => formatPercent(item.percent ?? (sum > 0 ? Math.max(0, item.value) / sum : 0));
   const framed = head.title !== void 0 || (head.timeframes?.length ?? 0) > 0;
+  const label_ = labelWidth ? `minmax(0,${labelWidth})` : "auto";
+  const wideColumns = showPercent ? `${label_} 1fr auto auto` : `${label_} 1fr auto`;
   const list = /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "ol",
     {
       "data-slot": "bar-list",
       "aria-label": label,
       className: cn(
-        "m-0 grid list-none items-center gap-x-3 gap-y-2 p-0 text-caption",
+        "m-0 grid list-none gap-y-3 p-0 text-caption sm:items-center sm:gap-x-3 sm:gap-y-2",
+        "sm:[grid-template-columns:var(--bar-list-columns)]",
         // Under a head, a little more air than the plots' own top margin.
         framed && "pt-2",
-        showPercent ? "grid-cols-[auto_1fr_auto_auto]" : "grid-cols-[auto_1fr_auto]",
         className
       ),
+      style: { "--bar-list-columns": wideColumns },
       children: rows.map((item) => {
         const share = Math.max(0, item.value) / top;
         return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
           "li",
           {
             "data-slot": "bar-list-row",
-            className: "col-span-full grid grid-cols-subgrid items-center",
+            className: cn(
+              // Narrow: label and value on one line, the bar under them.
+              "grid items-baseline gap-x-3 gap-y-1.5",
+              showPercent ? "grid-cols-[minmax(0,1fr)_auto_auto]" : "grid-cols-[minmax(0,1fr)_auto]",
+              "sm:col-span-full sm:grid-cols-subgrid sm:items-center sm:gap-y-0"
+            ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "max-w-[10rem] truncate text-muted-foreground", children: item.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "h-2 overflow-hidden rounded-full bg-secondary/15 shadow-inner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: cn("min-w-0 truncate text-muted-foreground", !labelWidth && "sm:max-w-[10rem]"), children: item.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                 "span",
                 {
-                  className: "block h-full rounded-full",
-                  style: {
-                    width: `${share * 100}%`,
-                    // A non-zero value keeps a sliver, so it never reads as zero.
-                    minWidth: item.value > 0 ? 4 : 0,
-                    background: seriesColor(0)
-                  }
+                  className: "order-last col-span-full h-2 overflow-hidden rounded-full bg-primary/15 shadow-inner sm:order-none sm:col-span-1",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                    "span",
+                    {
+                      className: "block h-full rounded-full bg-primary bg-gradient-primary",
+                      style: {
+                        width: `${share * 100}%`,
+                        // A non-zero value keeps a sliver, so it never reads as zero.
+                        minWidth: item.value > 0 ? 4 : 0
+                      }
+                    }
+                  )
                 }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "whitespace-nowrap text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
               showPercent && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-right tabular-nums text-muted-foreground", children: percentOf(item) })
             ]
           },

package/dist/web/index.d.cts

@@ -3386,6 +3386,13 @@ interface BarListProps extends ChartTitleProps {
     sort?: 'desc' | 'none';
     /** Prints each row's percentage after its value. On by default. */
     showPercent?: boolean;
+    /**
+     * A fixed width for the label column, as a CSS length ("8rem"). Lists that
+     * sit one under another (one per asset, say) each size their labels to
+     * their own, so their bars start at different points; one width lines them
+     * up. Longer labels are truncated. Defaults to the longest label.
+     */
+    labelWidth?: string;
     empty?: ReactNode;
     className?: string;
 }
@@ -3398,11 +3405,17 @@ interface BarListProps extends ChartTitleProps {
  * Given a `title` or `timeframes`, it carries the common chart head (title,
  * timeframe, the chart / table switch) like the other charts.
  *
- * One series, so one colour (series slot 1) for every bar: colouring nominal
+ * One series, so one fill for every bar: the primary gradient on a lighter
+ * step of the same colour, as `Meter` draws its normal state, so a bar list
+ * and a meter on one page read as the same kind of mark. Colouring nominal
  * rows darker-where-bigger would re-encode what the bar length already shows.
- * Rows separate by spacing on the muted track, never by dividers.
+ * Rows separate by spacing on the track, never by dividers.
+ *
+ * On a phone the label and value share the top line and the bar runs the full
+ * width under them, so a long label or value never squeezes the bar to a
+ * sliver.
  */
-declare function BarList({ items, label, formatValue, max, sort, showPercent, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
+declare function BarList({ items, label, formatValue, max, sort, showPercent, labelWidth, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
 
 interface DonutSegment {
     id: string;

package/dist/web/index.d.ts

@@ -3386,6 +3386,13 @@ interface BarListProps extends ChartTitleProps {
     sort?: 'desc' | 'none';
     /** Prints each row's percentage after its value. On by default. */
     showPercent?: boolean;
+    /**
+     * A fixed width for the label column, as a CSS length ("8rem"). Lists that
+     * sit one under another (one per asset, say) each size their labels to
+     * their own, so their bars start at different points; one width lines them
+     * up. Longer labels are truncated. Defaults to the longest label.
+     */
+    labelWidth?: string;
     empty?: ReactNode;
     className?: string;
 }
@@ -3398,11 +3405,17 @@ interface BarListProps extends ChartTitleProps {
  * Given a `title` or `timeframes`, it carries the common chart head (title,
  * timeframe, the chart / table switch) like the other charts.
  *
- * One series, so one colour (series slot 1) for every bar: colouring nominal
+ * One series, so one fill for every bar: the primary gradient on a lighter
+ * step of the same colour, as `Meter` draws its normal state, so a bar list
+ * and a meter on one page read as the same kind of mark. Colouring nominal
  * rows darker-where-bigger would re-encode what the bar length already shows.
- * Rows separate by spacing on the muted track, never by dividers.
+ * Rows separate by spacing on the track, never by dividers.
+ *
+ * On a phone the label and value share the top line and the bar runs the full
+ * width under them, so a long label or value never squeezes the bar to a
+ * sliver.
  */
-declare function BarList({ items, label, formatValue, max, sort, showPercent, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
+declare function BarList({ items, label, formatValue, max, sort, showPercent, labelWidth, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
 
 interface DonutSegment {
     id: string;