@eifi1/ui-kit 0.48.2 → 0.50.0

package/dist/components/section-nav.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { NavPills } from "./nav-pills.js";
+function SectionNav({
+  items,
+  current,
+  label,
+  onSelect,
+  renderLink,
+  phoneOnly = true,
+  className,
+  ref
+}) {
+  return /* @__PURE__ */ jsx(
+    NavPills,
+    {
+      ref,
+      "aria-label": label,
+      items,
+      current,
+      onSelect,
+      renderLink,
+      layout: "scroll",
+      itemClassName: "min-h-11 focus-visible:ring-inset",
+      className: cn("py-0.5 large:py-0", phoneOnly && "md:hidden", className)
+    }
+  );
+}
+export {
+  SectionNav
+};
+//# sourceMappingURL=section-nav.js.map

package/dist/components/section-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/section-nav.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { NavPills } from \"./nav-pills\";\nimport type { NavPillItem, NavPillLinkProps } from \"./nav-pills\";\nimport type { ReactElement, Ref } from \"react\";\n\nexport interface SectionNavProps<T extends string> {\n  /** The section's pages, each with its `href` (a pill without one is a button that\n   *  calls `onSelect`). Labels short: the row is one line. */\n  items: NavPillItem<T>[];\n  /** The page that is open. `null`: none of them. */\n  current: T | null;\n  /** The section's name — the landmark's accessible name (\"Accounting\"). */\n  label: string;\n  /** Called with a pill's value on a click, before the router follows its link. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>`, then `<a>`. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** Default `true`: only below `md`, where the sidebar that lists the same pages is\n   *  gone. `false` shows it at every width. */\n  phoneOnly?: boolean;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The pages of a section on a phone, as one row of pills under the page title (0.49\n * KIT-6) — kastlan's section pills, which each section page drew by hand.\n *\n * On a desktop the sidebar lists a group's pages; on a phone the AppShell's bar holds\n * the groups, and a group's pages are a sheet away. This row puts them on the page\n * itself: {@link NavPills} with `layout=\"scroll\"` — one line that scrolls sideways, faded\n * where it is cut, the open page scrolled into view (the row only, never the page). At\n * most 48 px high: 44 px pills, the touch target a finger needs, and 2 px above and\n * below. Each pill is a link (`aria-current=\"page\"` on the open one) and its own tab\n * stop; the row is a `<nav>` named by `label`.\n *\n * Place it right under the page's title (`PageHeader`); the AppShell's own row of a\n * group's pages above the bar (`mobileSubNav`) is the shell-wide alternative — use one,\n * not both, for the same pages.\n */\nexport function SectionNav<T extends string>({\n  items,\n  current,\n  label,\n  onSelect,\n  renderLink,\n  phoneOnly = true,\n  className,\n  ref,\n}: SectionNavProps<T>) {\n  return (\n    <NavPills\n      ref={ref}\n      aria-label={label}\n      items={items}\n      current={current}\n      onSelect={onSelect}\n      renderLink={renderLink}\n      layout=\"scroll\"\n      // The ring inside the pill: the row scrolls, so it clips what leaves its box.\n      itemClassName=\"min-h-11 focus-visible:ring-inset\"\n      className={cn(\"py-0.5 large:py-0\", phoneOnly && \"md:hidden\", className)}\n    />\n  );\n}\n"],"mappings":";AAmDI;AAnDJ,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAuClB,SAAS,WAA6B;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MAEP,eAAc;AAAA,MACd,WAAW,GAAG,qBAAqB,aAAa,aAAa,SAAS;AAAA;AAAA,EACxE;AAEJ;","names":[]}

package/dist/components/series-chart.js

@@ -63,7 +63,9 @@ import {
 import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { useTextSize } from "../theme/text-size.js";
 import { chartHeightProps } from "./chart-height.js";
+import { useChartEdge } from "./chart-edge.js";
 import { cn } from "../lib/cn.js";
+import { formatWithMinus } from "../lib/minus.js";
 function resolveTooltipPlacement(own, fromProvider, phone) {
   const wanted = own ?? fromProvider ?? "cursor";
   return wanted === "auto" ? phone ? "above" : "cursor" : wanted;
@@ -113,7 +115,7 @@ function useDefaultFormat(localeProp) {
   const locale = useKitLocale(localeProp);
   return useMemo(() => {
     const format = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
-    return (value) => format.format(value);
+    return (value) => formatWithMinus(format, value);
   }, [locale]);
 }
 const ONE_UNTITLED_AXIS = [{ id: DEFAULT_Y_AXIS, title: "" }];
@@ -256,6 +258,7 @@ function SeriesPlot({
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
   const { scale } = useTextSize();
+  const edgeFor = useChartEdge();
   const ticksAim = tickTarget(scale);
   const grow = (px) => scale === 1 ? px : Math.round(px * scale);
   const [keyStop, setKeyStop] = useState(0);
@@ -624,6 +627,7 @@ function SeriesPlot({
               const type = entry.type ?? "line";
               const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
               const color = `var(--color-${entry.key})`;
+              const edge = edgeFor(config[entry.key]?.color);
               const own = entry.dash ?? (entry.dashed ? 1 : 0);
               const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
               const curve = entry.step ? "stepAfter" : entry.curve ?? "monotone";
@@ -638,6 +642,7 @@ function SeriesPlot({
                     stackId: entry.stack,
                     fill: color,
                     fillOpacity: entry.fillOpacity,
+                    ...edge ? { stroke: edge, strokeWidth: 1 } : {},
                     radius: entry.stack === void 0 ? BAR_RADIUS : 0,
                     ...stub ? { minPointSize: (_value, index) => finite(plotted[index]?.[entry.key]) === void 0 ? 0 : stub } : {},
                     ...focusedStop?.key === entry.key ? { shape: focusedBarShape(focusedStop.index) } : {},
@@ -659,8 +664,8 @@ function SeriesPlot({
                     type: curve,
                     dataKey: entry.key,
                     stackId: entry.stack,
-                    stroke: color,
-                    strokeWidth: width2,
+                    stroke: edge ?? color,
+                    strokeWidth: edge ? 1 : width2,
                     strokeDasharray: dash,
                     fill: color,
                     fillOpacity: entry.fillOpacity ?? (entry.stack !== void 0 ? 0.55 : 0.2),