@siyahi/ui 0.1.9-next.29 → 0.1.9-next.30

package/agents/examples/stale-blocks.tsx

@@ -0,0 +1,56 @@
+import { AreaChartCard, Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
+
+const value = [
+  { month: "May", equity: 2150000, debt: 600000, gold: 320000, intl: 390000, cash: 150000 },
+  { month: "Jun", equity: 2230000, debt: 612000, gold: 334000, intl: 402000, cash: 160000 },
+  { month: "Jul", equity: 2390000, debt: 625000, gold: 352000, intl: 421000, cash: 172000 },
+  { month: "Aug", equity: 2310000, debt: 637000, gold: 371000, intl: 447000, cash: 185000 },
+  { month: "Sep", equity: 2620000, debt: 648000, gold: 390000, intl: 462000, cash: 198000 },
+  { month: "Oct", equity: 2800000, debt: 655000, gold: 410500, intl: 486300, cash: 212000 },
+];
+const kinds = [
+  { key: "equity", label: "Equity", color: "var(--chart-1)" },
+  { key: "debt", label: "Debt", color: "var(--chart-2)" },
+  { key: "gold", label: "Gold", color: "var(--chart-3)" },
+  { key: "intl", label: "International", color: "var(--chart-4)" },
+  { key: "cash", label: "Cash", color: "var(--chart-5)" },
+] as const;
+
+// The gift card sales and the holdings' values last came in on 3 November: the page marks both blocks stale, and each
+// loses its colour and says since when. The page decides; nothing is inferred from dates.
+export default function StaleBlocksExample() {
+  const { money, moneyCompact } = useFormat();
+  const tiles: SectionCard[] = [
+    {
+      label: "Revenue",
+      value: money(4512300),
+      badge: <Delta value={0.031} />,
+      trend: <Sparkline data={[3820000, 3950000, 4110000, 4020000, 4380000, 4512300]} />,
+      detail: "Month-end, last six months",
+    },
+    {
+      label: "Gift cards this year",
+      value: moneyCompact(38400),
+      badge: <Delta value={0.18} />,
+      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
+      detail: "Sold each month",
+      stale: "3 Nov",
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCards items={tiles} />
+      <AreaChartCard
+        title="Value by kind"
+        description="Month-end value of each kind of holding"
+        data={value}
+        xKey="month"
+        series={kinds}
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+        stale="3 Nov"
+      />
+    </div>
+  );
+}

package/agents/examples/table.tsx

@@ -32,8 +32,8 @@ export default function TableExample() {
           <TableHeader>
             <TableRow>
               <TableHead>Month</TableHead>
-              <TableHead className="text-right">In</TableHead>
-              <TableHead className="text-right">Out</TableHead>
+              <TableHead data-numeric>In</TableHead>
+              <TableHead data-numeric>Out</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -41,16 +41,16 @@ export default function TableExample() {
               // August's spending needs a look: the page marks the row, and the theme washes it amber.
               <TableRow key={row.month} data-tone={row.out > 50000 ? "warning" : undefined}>
                 <TableCell>{row.month}</TableCell>
-                <TableCell className="text-right">{money(row.in)}</TableCell>
-                <TableCell className="text-right">{money(row.out)}</TableCell>
+                <TableCell data-numeric>{money(row.in)}</TableCell>
+                <TableCell data-numeric>{money(row.out)}</TableCell>
               </TableRow>
             ))}
           </TableBody>
           <TableFooter>
             <TableRow>
               <TableCell>Total</TableCell>
-              <TableCell className="text-right">{money(total("in"))}</TableCell>
-              <TableCell className="text-right">{money(total("out"))}</TableCell>
+              <TableCell data-numeric>{money(total("in"))}</TableCell>
+              <TableCell data-numeric>{money(total("out"))}</TableCell>
             </TableRow>
           </TableFooter>
         </Table>

package/agents/manifest.json

@@ -268,10 +268,12 @@
     },
     {
       "need": "A command or file to copy, wrapped or scrolling",
-      "guidance": "`CodeBlock` with `CodeBlockCopyButton`",
+      "guidance": "`CodeBlock` with `CodeBlockCopyButton` in `CodeBlockActions` inside a `CodeBlockHeader`, never floating over the code",
       "components": [
         "CodeBlock",
-        "CodeBlockCopyButton"
+        "CodeBlockCopyButton",
+        "CodeBlockActions",
+        "CodeBlockHeader"
       ]
     },
     {
@@ -295,6 +297,37 @@
         "SiyahiProvider"
       ]
     },
+    {
+      "need": "A forecast stretch after the latest actual figure, or a marker for today",
+      "guidance": "`LineChartCard` or `AreaChartCard` with `forecastFrom` and `today` set to x values",
+      "components": [
+        "LineChartCard",
+        "AreaChartCard"
+      ]
+    },
+    {
+      "need": "More than five lines on one chart",
+      "guidance": "chart colours for the few the page is about, `var(--muted-foreground)` for the rest; every line keeps its own name",
+      "components": []
+    },
+    {
+      "need": "A chart or stat tile whose data is old",
+      "guidance": "`stale` on the chart card or the `SectionCards` item, with since when (\"3 Nov\"); `StaleNote` for another kind of block",
+      "components": [
+        "SectionCards",
+        "StaleNote"
+      ]
+    },
+    {
+      "need": "A form field with its label, a hint or an error",
+      "guidance": "`Field` with `FieldLabel`, the control, then `FieldDescription` or `FieldError`; `aria-invalid` on an invalid control",
+      "components": [
+        "Field",
+        "FieldLabel",
+        "FieldDescription",
+        "FieldError"
+      ]
+    },
     {
       "need": "A command, file or identifier inside prose",
       "guidance": "`InlineCode`",
@@ -378,7 +411,9 @@
       "file": "agents/examples/avatar.tsx",
       "components": [
         "Avatar",
-        "AvatarFallback"
+        "AvatarBadge",
+        "AvatarFallback",
+        "AvatarGroup"
       ]
     },
     {
@@ -599,6 +634,13 @@
         "LineChartCard"
       ]
     },
+    {
+      "file": "agents/examples/chart-line-forecast.tsx",
+      "components": [
+        "LineChartCard",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-line-log.tsx",
       "components": [
@@ -607,6 +649,13 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/chart-line-quiet.tsx",
+      "components": [
+        "LineChartCard",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-line-timeline.tsx",
       "components": [
@@ -622,6 +671,16 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/chart-panels.tsx",
+      "components": [
+        "AreaChartCard",
+        "BarChartCard",
+        "LineChartCard",
+        "PanelGrid",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/code-block.tsx",
       "components": [
@@ -821,6 +880,34 @@
         "DropdownMenuTrigger"
       ]
     },
+    {
+      "file": "agents/examples/field.tsx",
+      "components": [
+        "Button",
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "Field",
+        "FieldDescription",
+        "FieldError",
+        "FieldLabel",
+        "Input",
+        "InputGroup",
+        "InputGroupAddon",
+        "InputGroupInput",
+        "Select",
+        "SelectContent",
+        "SelectGroup",
+        "SelectItem",
+        "SelectTrigger",
+        "SelectValue",
+        "Textarea",
+        "ToggleGroup",
+        "ToggleGroupItem"
+      ]
+    },
     {
       "file": "agents/examples/formatters.tsx",
       "components": [
@@ -906,6 +993,10 @@
     {
       "file": "agents/examples/input-states.tsx",
       "components": [
+        "Field",
+        "FieldDescription",
+        "FieldError",
+        "FieldLabel",
         "Input"
       ]
     },
@@ -1173,6 +1264,16 @@
         "SlopeChart"
       ]
     },
+    {
+      "file": "agents/examples/stale-blocks.tsx",
+      "components": [
+        "AreaChartCard",
+        "Delta",
+        "SectionCards",
+        "Sparkline",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/surfaces.tsx",
       "components": [

package/dist/components/registry/charts/area-chart-card.d.ts

@@ -1,10 +1,14 @@
-import { ChartCurve, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
+import { ChartCurve, LineMarksProps, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/area-chart-card.d.ts
-export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps {
+export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
   /** Stack the series into a total instead of overlapping them. */
   stacked?: boolean;
   curve?: ChartCurve;
 }
-/** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
+/**
+ * Values over an ordered axis: overlapping series drawn as lines, or stacked into a total as tinted bands. A
+ * stack keeps solid edges through a forecast stretch, since a dashed copy of a band would stack twice; the hatched
+ * band still marks it.
+ */
 export declare function AreaChartCard<T extends object, K extends keyof T>({ stacked, curve, ...props }: AreaChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/area-chart-card.js

@@ -1,40 +1,67 @@
 "use client";
+import { QUIET, drawOrder } from "../../../lib/chart-marks.js";
 import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { Fragment as Fragment$1 } from "react";
 import { Area, AreaChart } from "recharts";
 //#region src/components/registry/charts/area-chart-card.tsx
-/** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
+/**
+* Values over an ordered axis: overlapping series drawn as lines, or stacked into a total as tinted bands. A
+* stack keeps solid edges through a forecast stretch, since a dashed copy of a band would stack twice; the hatched
+* band still marks it.
+*/
 function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
-	const id = useId();
+	const forecastEnd = props.forecastFrom !== void 0;
+	const forecast = !stacked && forecastEnd;
+	const count = props.data.length;
+	const series = stacked ? props.series : drawOrder(props.series);
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		logBlocked: stacked ? "Log cannot show stacked areas" : void 0,
+		endLabels: !stacked,
+		forecastHatch: !stacked,
+		curve,
 		...props,
-		children: [/* @__PURE__ */ jsx("defs", { children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsxs("linearGradient", {
-			id: `${id}-${index}`,
-			x1: "0",
-			y1: "0",
-			x2: "0",
-			y2: "1",
-			children: [/* @__PURE__ */ jsx("stop", {
-				offset: "0%",
-				stopColor: color,
-				stopOpacity: stacked ? .5 : .32
-			}), /* @__PURE__ */ jsx("stop", {
-				offset: "100%",
-				stopColor: color,
-				stopOpacity: stacked ? .15 : .02
-			})]
-		}, key)) }), props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Area, {
+		children: [forecast && series.map(({ key }) => /* @__PURE__ */ jsx(Area, {
 			dataKey: key,
 			type: curve,
-			fill: stacked || index === 0 ? `url(#${id}-${index})` : "none",
-			stroke: color,
-			strokeWidth: 2,
-			dot: endDot(color, props.data.length),
-			stackId: stacked ? "stack" : void 0
-		}, key))]
+			fill: "none",
+			stroke: "var(--card)",
+			strokeWidth: 6,
+			dot: false,
+			activeDot: false,
+			tooltipType: "none",
+			legendType: "none",
+			className: "chart-forecast",
+			animationDuration: 1300
+		}, `halo-${key}`)), series.map(({ key, color }) => {
+			const quiet = color === QUIET;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Area, {
+				dataKey: key,
+				type: curve,
+				fill: stacked ? color : "none",
+				fillOpacity: stacked ? .25 : void 0,
+				stroke: color,
+				strokeWidth: 2,
+				dot: quiet || forecast ? false : endDot(color, count, forecastEnd),
+				stackId: stacked ? "stack" : void 0,
+				className: forecast ? "chart-actual" : void 0,
+				animationDuration: 1300
+			}), forecast && /* @__PURE__ */ jsx(Area, {
+				dataKey: key,
+				type: curve,
+				fill: "none",
+				stroke: color,
+				strokeWidth: 2,
+				strokeDasharray: "5 4",
+				dot: quiet ? false : endDot(color, count, true),
+				activeDot: false,
+				tooltipType: "none",
+				legendType: "none",
+				className: "chart-forecast",
+				animationDuration: 1300
+			})] }, key);
+		})]
 	});
 }
 //#endregion

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -10,5 +10,6 @@ export interface BarChartCardProps<T extends object, K extends keyof T> extends
   /** Called with a clicked category's x value, or null when the picked one is clicked again. */
   onSelect?: (value: T[K] | null) => void;
 }
+/** Values over an ordered axis as bars: one series, or several grouped or stacked. */
 export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, selected, onSelect, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/bar-chart-card.js

@@ -1,12 +1,10 @@
 "use client";
-import { ChartFrame, seriesFill } from "../../../lib/chart-frame.js";
+import { ChartFrame, barFill, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
 const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
-const dimUnselected = (color, isSelected) => isSelected ? color : `color-mix(in oklab, ${color} 55%, var(--card))`;
-const signedFill = (color, isSelected) => `color-mix(in oklab, ${color} ${isSelected ? 35 : 15}%, var(--card))`;
 function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
@@ -18,7 +16,7 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 			const row = props.data[Number(activeTooltipIndex)];
 			if (row) onSelect(row[props.xKey] === selected ? null : row[props.xKey]);
 		} : void 0,
-		children: props.series.map((item, index) => {
+		children: props.series.map((item) => {
 			const { key, label, color, negativeColor } = item;
 			return /* @__PURE__ */ jsx(Bar, {
 				dataKey: key,
@@ -26,28 +24,14 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 				fill: seriesFill(item, props.data),
 				maxBarSize: props.horizontal ? 24 : void 0,
 				stackId: stacked ? "stack" : void 0,
-				radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
-					0,
-					2,
-					2,
-					0
-				] : [
-					2,
-					2,
-					0,
-					0
-				] : 0,
-				children: (negativeColor || selected !== null) && props.data.map((row, i) => {
-					const isSelected = selected === null || row[props.xKey] === selected;
+				isAnimationActive: false,
+				children: props.data.map((row, i) => {
 					const tone = negativeColor && Number(row[key]) < 0 ? negativeColor : color;
-					return negativeColor ? /* @__PURE__ */ jsx(Cell, {
-						fill: signedFill(tone, isSelected),
+					const dim = selected !== null && row[props.xKey] !== selected;
+					return /* @__PURE__ */ jsx(Cell, {
+						fill: barFill(tone, dim),
 						stroke: tone,
-						strokeWidth: 1.5
-					}, i) : /* @__PURE__ */ jsx(Cell, {
-						fill: dimUnselected(tone, isSelected),
-						stroke: tone,
-						strokeWidth: 1.5
+						strokeWidth: 1
 					}, i);
 				})
 			}, key);

package/dist/components/registry/charts/line-chart-card.d.ts

@@ -1,6 +1,6 @@
-import { ChartCurve, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
+import { ChartCurve, LineMarksProps, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/line-chart-card.d.ts
-export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps {
+export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
   curve?: ChartCurve;
 }
 /** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */

package/dist/components/registry/charts/line-chart-card.js

@@ -1,20 +1,55 @@
 "use client";
+import { drawOrder } from "../../../lib/chart-marks.js";
 import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
 /** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */
 function LineChartCard({ curve = "monotone", ...props }) {
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	const forecast = props.forecastFrom !== void 0;
+	const count = props.data.length;
+	const series = drawOrder(props.series);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: LineChart,
+		endLabels: true,
+		curve,
 		...props,
-		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Line, {
+		children: [forecast && series.map(({ key }) => /* @__PURE__ */ jsx(Line, {
 			dataKey: key,
 			type: curve,
-			stroke: color,
-			strokeWidth: 2,
-			dot: endDot(color, props.data.length)
-		}, key))
+			stroke: "var(--card)",
+			strokeWidth: 6,
+			dot: false,
+			activeDot: false,
+			tooltipType: "none",
+			legendType: "none",
+			className: "chart-forecast",
+			animationDuration: 1300
+		}, `halo-${key}`)), series.map(({ key, color }) => {
+			const dot = color === "var(--muted-foreground)" || forecast ? false : endDot(color, count);
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Line, {
+				dataKey: key,
+				type: curve,
+				stroke: color,
+				strokeWidth: 2,
+				dot,
+				className: forecast ? "chart-actual" : void 0,
+				animationDuration: 1300
+			}), forecast && /* @__PURE__ */ jsx(Line, {
+				dataKey: key,
+				type: curve,
+				stroke: color,
+				strokeWidth: 2,
+				strokeDasharray: "5 4",
+				dot: color === "var(--muted-foreground)" ? false : endDot(color, count, true),
+				activeDot: false,
+				tooltipType: "none",
+				legendType: "none",
+				className: "chart-forecast",
+				animationDuration: 1300
+			})] }, key);
+		})]
 	});
 }
 //#endregion

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -16,6 +16,8 @@ export interface SectionCard {
   disabled?: boolean;
   /** Marks the tile as the exception on the page: a faint wash of the colour and an outline of it. */
   tone?: "negative" | "warning";
+  /** Marks the tile's data as old, with since when, such as "3 Nov": the tile greys out and says so. */
+  stale?: React$1.ReactNode;
 }
 export interface SectionCardsProps {
   items: SectionCard[];

package/dist/components/registry/dashboard-01/section-cards.js

@@ -2,6 +2,7 @@
 import { Badge } from "../../ui/badge.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
 import { cn } from "../../../lib/utils.js";
+import { StaleNote } from "../../siyahi/stale-note.js";
 import { useSurface } from "../../siyahi/siyahi-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
@@ -26,6 +27,7 @@ function SectionCards({ items, selected, onSelect }) {
 				className: cn("min-w-0", ruled && "border-e border-b"),
 				children: /* @__PURE__ */ jsxs(Card, {
 					"data-tone": item.tone,
+					"data-stale": item.stale ? "" : void 0,
 					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
 					children: [
 						onSelect && /* @__PURE__ */ jsx("button", {
@@ -41,6 +43,7 @@ function SectionCards({ items, selected, onSelect }) {
 								className: "font-mono text-2xs tracking-wider uppercase",
 								children: item.label
 							}),
+							item.stale && /* @__PURE__ */ jsx(StaleNote, { since: item.stale }),
 							/* @__PURE__ */ jsx(CardTitle, {
 								className: "text-2xl font-semibold tabular-nums",
 								children: item.value

package/dist/components/registry/heatmap/calendar-heatmap.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { useElementWidth } from "../../../lib/use-element-width.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { heat, heatFill } from "../../../lib/heat.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useLayoutEffect, useMemo } from "react";
@@ -352,7 +352,7 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
-		className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:stroke-ring focus-visible:stroke-2", className),
+		className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer", className),
 		"data-value": activity.value,
 		"data-date": activity.date,
 		"data-level": level,

package/dist/components/registry/heatmap/status-heatmap.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { useElementWidth } from "../../../lib/use-element-width.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useId, useMemo } from "react";
 import { format } from "date-fns";
@@ -208,7 +208,7 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, sele
 		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
-		className: cn(edge && "stroke-input stroke-1", "hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:stroke-ring focus-visible:stroke-2", className),
+		className: cn(edge && "stroke-input stroke-1", "hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer", className),
 		"data-value": activity.value,
 		"data-date": activity.date,
 		"data-highlighted": highlighted || void 0,

package/dist/components/registry/heatmap/weekday-heatmap.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { useElementWidth } from "../../../lib/use-element-width.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 import { format } from "date-fns";
@@ -258,7 +258,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, select
 		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
-		className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:stroke-ring focus-visible:stroke-2", className),
+		className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer", className),
 		"data-value": activity.value,
 		"data-weekday": isExtraRow ? "extra" : activity.weekday,
 		"data-hour": isExtraColumn ? "extra" : activity.hour,

package/dist/components/registry/niko-table/filters/table-faceted-filter.js

@@ -2,8 +2,8 @@
 import { Badge } from "../../../ui/badge.js";
 import { Button } from "../../../ui/button.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { Separator } from "../../../ui/separator.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS } from "../lib/constants.js";
 import { Check, PlusCircle, XCircle } from "lucide-react";

package/dist/components/siyahi/histogram-chart.js

@@ -1,9 +1,9 @@
 import { useLocale } from "./siyahi-provider.js";
 import { linearTicks } from "../../lib/ticks.js";
-import { ChartFrame } from "../../lib/chart-frame.js";
+import { ChartFrame, barFill } from "../../lib/chart-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Bar, BarChart } from "recharts";
+import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/siyahi/histogram-chart.tsx
 /**
 * Buckets of one round width (1, 2, 2.5 or 5 × 10ⁿ) covering the values, about `target` of them. Values that are not
@@ -121,12 +121,12 @@ function HistogramChartCard({ values, bins: target = 12, valueFormatter, tickFor
 			dataKey: "count",
 			name: countLabel,
 			fill: "var(--chart-1)",
-			radius: [
-				2,
-				2,
-				0,
-				0
-			]
+			isAnimationActive: false,
+			children: bins.map((bin) => /* @__PURE__ */ jsx(Cell, {
+				fill: barFill("var(--chart-1)"),
+				stroke: "var(--chart-1)",
+				strokeWidth: 1
+			}, bin.key))
 		})
 	});
 }

package/dist/components/siyahi/scatter-chart.js

@@ -279,7 +279,7 @@ function Dot({ cx, cy, payload, index, "data-recharts-item-id": itemId, selected
 		tabIndex: onSelect ? key === focusKey ? 0 : -1 : void 0,
 		"aria-label": describe(payload),
 		"aria-pressed": onSelect ? isSelected : void 0,
-		className: onSelect ? "cursor-pointer outline-none focus-visible:stroke-ring focus-visible:stroke-2" : void 0,
+		className: onSelect ? "cursor-pointer" : void 0,
 		onKeyDown: (event) => onKeyDown(event, payload),
 		onClick: (event) => {
 			if (!onSelect) return;