kaleido-ui 0.2.5 → 0.2.7

package/dist/web/components/withdraw-amount-input.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   WithdrawAmountInput
-} from "../chunk-IWDBETXQ.js";
+} from "../chunk-JWMFTRDC.js";
 import "../chunk-H3GYLFHP.js";
 import "../chunk-VM6AGMYO.js";
 import "../chunk-CXMCWSWC.js";
-import "../chunk-MTQOAMDW.js";
 import "../chunk-OWSKP527.js";
+import "../chunk-MTQOAMDW.js";
 import "../chunk-PMGIJMRO.js";
 export {
   WithdrawAmountInput

package/dist/web/components/withdraw-confirmation.js

@@ -1,17 +1,17 @@
 "use client";
 import {
   WithdrawConfirmation
-} from "../chunk-D5CPIS6B.js";
+} from "../chunk-PTSOVDKH.js";
 import "../chunk-VM6AGMYO.js";
-import "../chunk-SGXLWU4V.js";
+import "../chunk-2REWXJEN.js";
+import "../chunk-VLZMX43R.js";
 import "../chunk-DCUAE6PX.js";
 import "../chunk-JY3H7ZAI.js";
 import "../chunk-OWSKP527.js";
+import "../chunk-WEPSTI3Z.js";
 import "../chunk-YQQ7GDLZ.js";
-import "../chunk-PMGIJMRO.js";
 import "../chunk-XXH4TYKZ.js";
-import "../chunk-WEPSTI3Z.js";
-import "../chunk-VLZMX43R.js";
+import "../chunk-PMGIJMRO.js";
 export {
   WithdrawConfirmation
 };

package/dist/web/components/withdraw-destination-input.js

@@ -3,12 +3,12 @@ import {
   WithdrawDestinationInput
 } from "../chunk-TY6SGZC7.js";
 import "../chunk-H3GYLFHP.js";
-import "../chunk-MTQOAMDW.js";
 import "../chunk-JY3H7ZAI.js";
 import "../chunk-OWSKP527.js";
+import "../chunk-MTQOAMDW.js";
 import "../chunk-YQQ7GDLZ.js";
-import "../chunk-PMGIJMRO.js";
 import "../chunk-XXH4TYKZ.js";
+import "../chunk-PMGIJMRO.js";
 export {
   WithdrawDestinationInput
 };

package/dist/web/components/withdraw-success.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   WithdrawSuccess
-} from "../chunk-NXPVF5WX.js";
+} from "../chunk-WURSWAKE.js";
 import "../chunk-VM6AGMYO.js";
 import "../chunk-MTQOAMDW.js";
 import "../chunk-YQQ7GDLZ.js";
-import "../chunk-PMGIJMRO.js";
 import "../chunk-XXH4TYKZ.js";
+import "../chunk-PMGIJMRO.js";
 export {
   WithdrawSuccess
 };

package/dist/web/icons/public.js

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

package/dist/web/index.cjs

@@ -1914,10 +1914,9 @@ var DrawerSection = ({ className, label, children, ...props }) => {
 };
 DrawerSection.displayName = "DrawerSection";
 var activeIcon = "[&>span[aria-hidden=true]]:text-status-success";
-var activeRow = cn(
-  "bg-primary/10 bg-gradient-active font-semibold text-foreground ring-1 ring-inset ring-primary/40 shadow-nav-active",
-  activeIcon
-);
+var activeRow = cn("bg-primary/15 bg-gradient-active font-semibold text-foreground", activeIcon);
+var activeGroupRow = cn("bg-primary/[0.06] font-semibold text-foreground", activeIcon);
+var activeSubRow = cn("bg-primary/[0.14] font-semibold text-brand", activeIcon);
 var idleRow = "text-content-secondary hover-gradient-violet hover:text-foreground hover:shadow-raised";
 var DrawerGroupContext = React12.createContext(false);
 var DrawerNavItem = React12.forwardRef(
@@ -1951,7 +1950,7 @@ var DrawerNavItem = React12.forwardRef(
         title,
         className: cn(
           "flex min-w-0 items-center gap-3 rounded-lg px-4 py-2.5 text-caption transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-          active ? cn("bg-primary/10 bg-gradient-active font-semibold text-brand", activeIcon) : "text-content-secondary hover:translate-x-1 hover-gradient-violet hover:text-foreground motion-reduce:hover:translate-x-0",
+          active ? activeSubRow : "text-content-secondary hover:translate-x-1 hover-gradient-violet hover:text-foreground motion-reduce:hover:translate-x-0",
           className
         ),
         onClick: (event) => {
@@ -2033,7 +2032,7 @@ var DrawerNavGroup = ({
   const rowClass2 = cn(
     "group flex w-full min-w-0 items-center rounded-xl px-4 py-3 text-left transition-all duration-300 hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100",
     collapsed ? "justify-center" : "gap-4",
-    active ? activeRow : idleRow
+    active ? collapsed ? activeRow : activeGroupRow : idleRow
   );
   const iconNode = icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "span",
@@ -2052,6 +2051,7 @@ var DrawerNavGroup = ({
         glyph: ChevronRight,
         className: cn(
           "shrink-0 text-icon-md transition-all duration-300 motion-reduce:transition-none",
+          active && "text-brand",
           open && "rotate-90"
         )
       }
@@ -10462,6 +10462,16 @@ function FilterChipGroup({
 
 // src/web/components/charts/core.tsx
 var import_jsx_runtime116 = require("react/jsx-runtime");
+var BAR_GAP = 2;
+var BAR_RADIUS = 4;
+function barPath(x, y, w, h, end) {
+  const r = Math.min(BAR_RADIUS, w / 2, h / 2);
+  if (end === "none" || r <= 0) return `M${x},${y}h${w}v${h}h${-w}Z`;
+  if (end === "top") {
+    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
+  }
+  return `M${x},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h - r}Q${x + w},${y + h} ${x + w - r},${y + h}H${x}Z`;
+}
 var seriesColor = (slot) => `var(--series-${slot % chartSeriesLimit + 1})`;
 var defaultChartFormat = (value) => formatAmount(value);
 var TICK_FONT = 11;
@@ -10925,7 +10935,7 @@ function TrendChart({
   const barWidth = band >= 4 ? Math.min(band * 0.72, MAX_BAR_WIDTH) : Math.max(1, band - 0.75);
   const barOffset = (band - barWidth) / 2;
   const labelIndices = trendChartLabelIndices(count3, plotWidth / X_LABEL_SPACING);
-  const fillFor = (index) => textures[index] === "hatch" ? `url(#${idBase}-hatch-${index})` : toneFill[series[index].tone];
+  const fillFor = (index) => textures[index] === "hatch" ? `url(#${idBase}-hatch-${index})` : `url(#${idBase}-fill-${index})`;
   const activePoint = active === null ? null : points[active];
   const readoutId = `${idBase}-readout`;
   const activeRows = activePoint ? series.map((s) => ({
@@ -10987,7 +10997,7 @@ function TrendChart({
                   "aria-hidden": "true",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("defs", { children: series.map(
-                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : null
+                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(SolidFill, { id: `${idBase}-fill-${index}`, tone: s.tone }, s.id)
                     ) }),
                     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("g", { "data-slot": "trend-chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
@@ -11035,16 +11045,21 @@ function TrendChart({
                           if (value <= 0) return null;
                           const top = y(base + value);
                           const bottom = y(base);
+                          const seam = base > 0 ? BAR_GAP : 0;
                           base += value;
+                          const isTop = series.slice(seriesIndex + 1).every((next) => (point.values[next.id] ?? 0) <= 0);
                           const hatched = textures[seriesIndex] === "hatch";
                           return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-                            "rect",
+                            "path",
                             {
                               "data-series": s.id,
-                              x: plotLeft + pointIndex * band + barOffset,
-                              y: top,
-                              width: barWidth,
-                              height: Math.max(0.5, bottom - top - (seriesIndex > 0 ? 1 : 0)),
+                              d: barPath(
+                                plotLeft + pointIndex * band + barOffset,
+                                top,
+                                barWidth,
+                                Math.max(0.5, bottom - top - seam),
+                                isTop ? "top" : "none"
+                              ),
                               fill: fillFor(seriesIndex),
                               stroke: hatched ? toneFill[s.tone] : void 0,
                               strokeWidth: hatched && barWidth >= 4 ? 1 : 0
@@ -11126,6 +11141,12 @@ function TrendChart({
     }
   );
 }
+function SolidFill({ id, tone }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("stop", { offset: "0%", style: { stopColor: `color-mix(in oklab, ${toneFill[tone]}, white 35%)` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("stop", { offset: "100%", style: { stopColor: toneFill[tone] } })
+  ] });
+}
 function Texture({
   id,
   tone,
@@ -11349,16 +11370,7 @@ function AreaChart2(props) {
 var import_react35 = require("react");
 var import_jsx_runtime119 = require("react/jsx-runtime");
 var MAX_BAR = 24;
-var GAP = 2;
-var RADIUS = 4;
-function barPath(x, y, w, h, end) {
-  const r = Math.min(RADIUS, w / 2, h / 2);
-  if (end === "none" || r <= 0) return `M${x},${y}h${w}v${h}h${-w}Z`;
-  if (end === "top") {
-    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
-  }
-  return `M${x},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h - r}Q${x + w},${y + h} ${x + w - r},${y + h}H${x}Z`;
-}
+var GAP = BAR_GAP;
 function BarChart2({
   data,
   series: allSeries,

package/dist/web/index.d.cts

@@ -3041,7 +3041,6 @@ interface ChartDatum {
     detail?: string;
     values: Readonly<Record<string, number>>;
 }
-/** The series colour for a slot. Slots past the palette are a bug, not a new hue. */
 declare const seriesColor: (slot: number) => string;
 /**
  * Value-axis ticks that only name values the chart reaches: from zero, round

package/dist/web/index.d.ts

@@ -3041,7 +3041,6 @@ interface ChartDatum {
     detail?: string;
     values: Readonly<Record<string, number>>;
 }
-/** The series colour for a slot. Slots past the palette are a bug, not a new hue. */
 declare const seriesColor: (slot: number) => string;
 /**
  * Value-axis ticks that only name values the chart reaches: from zero, round