@eifi1/ui-kit 0.7.0 → 0.8.0

package/dist/components/progress-bar.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
+type ProgressBarSize = "sm" | "md" | "lg";
+interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
+    /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way
+     *  and nobody knows how much is left (an import that reports no count). */
+    value?: number;
+    min?: number;
+    max?: number;
+    /**
+     * `progress` (default): a task moving toward completion — `role="progressbar"`.
+     * `meter`: a share of a known whole that is not going anywhere (budget used, disk
+     * space, one category's slice of spending) — `role="meter"`. keksdose's share bars
+     * were progress bars to a screen reader, which reads "busy" into a figure that is
+     * simply a figure. A meter is never indeterminate; a missing value reads as `min`.
+     */
+    variant?: "progress" | "meter";
+    /** Visible label above the bar, and its accessible name. Without it, pass
+     *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */
+    label?: ReactNode;
+    /** Show the value text at the end of the label row. */
+    showValue?: boolean;
+    /**
+     * The value as words — both the visible `showValue` text and `aria-valuetext`.
+     * Default: the fraction as a percentage in the kit's locale ("42 %" in French).
+     * Pass one for anything that is not a percentage: `(v, max) => \`${v} of ${max} files\``.
+     */
+    formatValue?: (value: number, max: number, min: number) => string;
+    tone?: ProgressBarTone;
+    size?: ProgressBarSize;
+    locale?: string;
+}
+/**
+ * A horizontal bar that fills toward `max`.
+ *
+ * keksdose (import progress, budget share bars) and kastlan (upload and job
+ * progress) each drew their own div-in-a-div. None had a role, so a reader heard
+ * nothing at all; the share bars that did have one claimed to be progress.
+ *
+ * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow="37"`
+ * is read as "37" by some readers and "37 percent" by others, and neither is right
+ * when `max` is 212 files.
+ *
+ * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,
+ * half-strength bar across the whole track — still visibly "something is happening",
+ * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than
+ * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an
+ * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.
+ */
+declare function ProgressBar({ value, min, max, variant, label, showValue, formatValue, tone, size, locale, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ProgressBarProps): react.JSX.Element;
+
+export { ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone };

package/dist/components/progress-bar.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+const FILL = {
+  brand: "bg-[var(--brand)]",
+  neutral: "bg-[var(--text-muted)]",
+  success: "bg-[var(--success)]",
+  warning: "bg-[var(--warning)]",
+  danger: "bg-[var(--danger)]",
+  info: "bg-[var(--info)]"
+};
+const TRACK_HEIGHT = { sm: "h-1", md: "h-2", lg: "h-3" };
+function ProgressBar({
+  value,
+  min = 0,
+  max = 100,
+  variant = "progress",
+  label,
+  showValue = false,
+  formatValue,
+  tone = "brand",
+  size = "md",
+  locale,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+}) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const kitLocale = useKitLocale(locale);
+  const labelId = useId();
+  const meter = variant === "meter";
+  const current = value === void 0 || !Number.isFinite(value) ? meter ? min : void 0 : value;
+  const indeterminate = current === void 0;
+  const span = max - min;
+  const clamped = indeterminate ? void 0 : Math.min(max, Math.max(min, current));
+  const fraction = clamped === void 0 || span <= 0 ? 0 : (clamped - min) / span;
+  const valueText = clamped === void 0 ? void 0 : formatValue ? formatValue(clamped, max, min) : new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(fraction);
+  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+  const name = labelledBy ? void 0 : ariaLabel ?? (indeterminate ? common.loading : void 0);
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), "data-state": indeterminate ? "indeterminate" : "determinate", children: [
+    (label != null || showValue && valueText !== void 0) && /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-baseline gap-2 text-sm", children: [
+      label != null && /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 text-[var(--text-secondary)]", children: label }),
+      showValue && valueText !== void 0 && // Hidden: the same words are the bar's aria-valuetext, and reading them
+      // twice in a row is noise.
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-auto shrink-0 tabular-nums text-[var(--text-muted)]", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        role: meter ? "meter" : "progressbar",
+        "aria-label": name,
+        "aria-labelledby": labelledBy,
+        "aria-valuemin": indeterminate ? void 0 : min,
+        "aria-valuemax": indeterminate ? void 0 : max,
+        "aria-valuenow": clamped,
+        "aria-valuetext": valueText,
+        "aria-busy": !meter && indeterminate ? true : void 0,
+        className: cn("relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]", TRACK_HEIGHT[size]),
+        children: indeterminate ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-part": "fill",
+            className: cn(
+              // `left-0`, deliberately physical: the keyframes (tokens.css
+              // `indeterminate-sweep`) translate along the physical x axis, and under
+              // RTL the same keyframes are run in REVERSE — from the right edge back
+              // to the left. A logical `start-0` would park the segment at the right
+              // in RTL and the reversed sweep would then start off-screen.
+              "absolute inset-y-0 left-0 w-1/3 rounded-full",
+              "animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]",
+              "motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50",
+              FILL[tone]
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-part": "fill",
+            className: cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", FILL[tone]),
+            style: { width: `${fraction * 100}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ProgressBar
+};
+//# sourceMappingURL=progress-bar.js.map

package/dist/components/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport type ProgressBarTone = \"brand\" | \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", md: \"h-2\", lg: \"h-3\" };\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  max?: number;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rest\n}: ProgressBarProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n\n  const meter = variant === \"meter\";\n  const current = value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value;\n  const indeterminate = current === undefined;\n  const span = max - min;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText =\n    clamped === undefined\n      ? undefined\n      : formatValue\n        ? formatValue(clamped, max, min)\n        : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(fraction);\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <div className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={valueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {indeterminate ? (\n          <div\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <div\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0GQ,SAEI,KAFJ;AA1GR,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,oBAAoB;AAKlE,MAAM,OAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,eAAgD,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,MAAM;AAiDjF,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,UAAU,MAAM;AAEtB,QAAM,QAAQ,YAAY;AAC1B,QAAM,UAAU,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IAAK,QAAQ,MAAM,SAAa;AAC7F,QAAM,gBAAgB,YAAY;AAClC,QAAM,OAAO,MAAM;AACnB,QAAM,UAAU,gBAAgB,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC;AAChF,QAAM,WAAW,YAAY,UAAa,QAAQ,IAAI,KAAK,UAAU,OAAO;AAE5E,QAAM,YACJ,YAAY,SACR,SACA,cACE,YAAY,SAAS,KAAK,GAAG,IAC7B,IAAI,KAAK,aAAa,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,QAAQ;AAExG,QAAM,aAAa,mBAAmB,SAAS,OAAO,UAAU;AAChE,QAAM,OAAO,aAAa,SAAa,cAAc,gBAAgB,OAAO,UAAU;AAEtF,SACE,qBAAC,SAAI,WAAW,GAAG,WAAW,SAAS,GAAG,cAAY,gBAAgB,kBAAkB,eACpF;AAAA,cAAS,QAAS,aAAa,cAAc,WAC7C,qBAAC,SAAI,WAAU,0CACZ;AAAA,eAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wCAC1B,iBACH;AAAA,MAED,aAAa,cAAc;AAAA;AAAA,MAG1B,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,qBACH;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,QAAQ,UAAU;AAAA,QACxB,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,aAAW,CAAC,SAAS,gBAAgB,OAAO;AAAA,QAG5C,WAAW,GAAG,sEAAsE,aAAa,IAAI,CAAC;AAAA,QAErG,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMT;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YAGV,WAAW,GAAG,qFAAqF,KAAK,IAAI,CAAC;AAAA,YAC7G,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI;AAAA;AAAA,QACvC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, Ref, RefObject } from 'react';
+
+/**
+ * Whether `ref`'s element currently overflows its box — the one fact a scroll
+ * container needs to decide whether it is a keyboard stop.
+ *
+ * Measured on every commit (cheap: two reads, and state is set only on a change) and
+ * whenever the element or one of its direct children resizes, which covers both
+ * "the panel got narrower" and "the rows arrived". Without `ResizeObserver` (jsdom,
+ * very old engines) the per-commit measurement is what remains.
+ *
+ * Shared with {@link Table}'s overflow wrapper, which has the same obligation.
+ */
+declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean;
+/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the
+ *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,
+ *  which has neither. Where the standard pair applies, Chrome ignores the rest. */
+declare const THIN_SCROLLBAR_CLASS: string;
+declare const AXIS: {
+    readonly vertical: "overflow-y-auto overflow-x-hidden";
+    readonly horizontal: "overflow-x-auto overflow-y-hidden";
+    readonly both: "overflow-auto";
+};
+interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+    /** Which way the content may scroll. Default `vertical`. */
+    orientation?: keyof typeof AXIS;
+    /**
+     * The region's accessible name. With it (or `aria-labelledby`) the container is a
+     * `role="region"` a reader can find and name; without it, it is a plain box.
+     * Name every ScrollArea whose content can overflow: once it is a tab stop, a
+     * reader announces it on focus, and an unnamed one is announced as nothing.
+     */
+    label?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,
+ * and the keyboard access a plain `overflow-auto` div does not have.
+ *
+ * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a
+ * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no
+ * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.
+ *
+ * A container that scrolls but holds nothing focusable cannot be scrolled from the
+ * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content
+ * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and
+ * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list
+ * adds no empty stop to the tab order.
+ */
+declare function ScrollArea({ orientation, label, className, ref, tabIndex, "aria-labelledby": labelledBy, ...rest }: ScrollAreaProps): react.JSX.Element;
+
+export { ScrollArea, type ScrollAreaProps, THIN_SCROLLBAR_CLASS, useScrollOverflow };

package/dist/components/scroll-area.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+function useScrollOverflow(ref) {
+  const [overflowing, setOverflowing] = useState(false);
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+    setOverflowing((prev) => prev === next ? prev : next);
+  }, [ref]);
+  useLayoutEffect(() => {
+    measure();
+  });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    for (const child of Array.from(el.children)) ro.observe(child);
+    return () => ro.disconnect();
+  }, [ref, measure]);
+  return overflowing;
+}
+const THIN_SCROLLBAR_CLASS = cn(
+  "[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]",
+  "[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]"
+);
+const AXIS = {
+  vertical: "overflow-y-auto overflow-x-hidden",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+function ScrollArea({
+  orientation = "vertical",
+  label,
+  className,
+  ref,
+  tabIndex,
+  "aria-labelledby": labelledBy,
+  ...rest
+}) {
+  const inner = useRef(null);
+  const overflowing = useScrollOverflow(inner);
+  const setRef = useCallback(
+    (el) => {
+      inner.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const named = label !== void 0 || labelledBy !== void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: setRef,
+      role: named ? "region" : void 0,
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      tabIndex: tabIndex ?? (overflowing ? 0 : void 0),
+      "data-overflowing": overflowing || void 0,
+      "data-orientation": orientation,
+      className: cn(
+        "relative min-h-0 min-w-0",
+        AXIS[orientation],
+        THIN_SCROLLBAR_CLASS,
+        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —
+        // a row with its own background would cover exactly the part of the ring that
+        // says where focus is. An outline paints above it, and the negative offset
+        // keeps it inside a parent that clips.
+        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+        className
+      )
+    }
+  );
+}
+export {
+  ScrollArea,
+  THIN_SCROLLBAR_CLASS,
+  useScrollOverflow
+};
+//# sourceMappingURL=scroll-area.js.map

package/dist/components/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Whether `ref`'s element currently overflows its box — the one fact a scroll\n * container needs to decide whether it is a keyboard stop.\n *\n * Measured on every commit (cheap: two reads, and state is set only on a change) and\n * whenever the element or one of its direct children resizes, which covers both\n * \"the panel got narrower\" and \"the rows arrived\". Without `ResizeObserver` (jsdom,\n * very old engines) the per-commit measurement is what remains.\n *\n * Shared with {@link Table}'s overflow wrapper, which has the same obligation.\n */\nexport function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean {\n  const [overflowing, setOverflowing] = useState(false);\n\n  const measure = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;\n    setOverflowing((prev) => (prev === next ? prev : next));\n  }, [ref]);\n\n  // No dependency list on purpose: content changes arrive as re-renders.\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    for (const child of Array.from(el.children)) ro.observe(child);\n    return () => ro.disconnect();\n  }, [ref, measure]);\n\n  return overflowing;\n}\n\n/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the\n *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,\n *  which has neither. Where the standard pair applies, Chrome ignores the rest. */\nexport const THIN_SCROLLBAR_CLASS = cn(\n  \"[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]\",\n  \"[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent\",\n  \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]\",\n);\n\nconst AXIS = {\n  vertical: \"overflow-y-auto overflow-x-hidden\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Which way the content may scroll. Default `vertical`. */\n  orientation?: keyof typeof AXIS;\n  /**\n   * The region's accessible name. With it (or `aria-labelledby`) the container is a\n   * `role=\"region\"` a reader can find and name; without it, it is a plain box.\n   * Name every ScrollArea whose content can overflow: once it is a tab stop, a\n   * reader announces it on focus, and an unnamed one is announced as nothing.\n   */\n  label?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,\n * and the keyboard access a plain `overflow-auto` div does not have.\n *\n * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a\n * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no\n * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.\n *\n * A container that scrolls but holds nothing focusable cannot be scrolled from the\n * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content\n * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and\n * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list\n * adds no empty stop to the tab order.\n */\nexport function ScrollArea({\n  orientation = \"vertical\",\n  label,\n  className,\n  ref,\n  tabIndex,\n  \"aria-labelledby\": labelledBy,\n  ...rest\n}: ScrollAreaProps) {\n  const inner = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(inner);\n  const setRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      inner.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    },\n    [ref],\n  );\n  const named = label !== undefined || labelledBy !== undefined;\n\n  return (\n    <div\n      {...rest}\n      ref={setRef}\n      role={named ? \"region\" : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      tabIndex={tabIndex ?? (overflowing ? 0 : undefined)}\n      data-overflowing={overflowing || undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"relative min-h-0 min-w-0\",\n        AXIS[orientation],\n        THIN_SCROLLBAR_CLASS,\n        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —\n        // a row with its own background would cover exactly the part of the ring that\n        // says where focus is. An outline paints above it, and the negative offset\n        // keeps it inside a parent that clips.\n        \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AA0GI;AA1GJ,SAAS,aAAa,iBAAiB,QAAQ,gBAAgB;AAE/D,SAAS,UAAU;AAaZ,SAAS,kBAAkB,KAA6C;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,eAAe,GAAG,eAAe,KAAK,GAAG,cAAc,GAAG,cAAc;AACxF,mBAAe,CAAC,SAAU,SAAS,OAAO,OAAO,IAAK;AAAA,EACxD,GAAG,CAAC,GAAG,CAAC;AAGR,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EACV,CAAC;AAED,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAClD,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,eAAW,SAAS,MAAM,KAAK,GAAG,QAAQ,EAAG,IAAG,QAAQ,KAAK;AAC7D,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SAAO;AACT;AAKO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AACR;AA6BO,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,SAAS;AAAA,IACb,CAAC,OAA8B;AAC7B,YAAM,UAAU;AAChB,UAAI,OAAO,QAAQ,WAAY,KAAI,EAAE;AAAA,eAC5B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AACA,QAAM,QAAQ,UAAU,UAAa,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ,WAAW;AAAA,MACzB,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAU,aAAa,cAAc,IAAI;AAAA,MACzC,oBAAkB,eAAe;AAAA,MACjC,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,KAAK,WAAW;AAAA,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/separator.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+interface SeparatorProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
+    orientation?: "horizontal" | "vertical";
+    /**
+     * `false` (default, as in Radix): a real `role="separator"`, which a reader
+     * announces — right between groups of controls, a menu's sections, a toolbar's
+     * halves. `true`: a line for the eye only (`role="none"`), for a divider that
+     * separates nothing the structure does not already separate.
+     */
+    decorative?: boolean;
+}
+/**
+ * A hairline between two things.
+ *
+ * kastlan's other Radix leftover. `aria-orientation` is set only when vertical:
+ * horizontal is the role's default, and stating a default is noise in every reader's
+ * verbose mode.
+ */
+declare function Separator({ orientation, decorative, className, ...rest }: SeparatorProps): react.JSX.Element;
+
+export { Separator, type SeparatorProps };

package/dist/components/separator.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+function Separator({ orientation = "horizontal", decorative = false, className, ...rest }) {
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": !decorative && vertical ? "vertical" : void 0,
+      "data-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-[var(--border)]",
+        vertical ? "w-px self-stretch" : "h-px w-full",
+        className
+      )
+    }
+  );
+}
+export {
+  Separator
+};
+//# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/separator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface SeparatorProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `false` (default, as in Radix): a real `role=\"separator\"`, which a reader\n   * announces — right between groups of controls, a menu's sections, a toolbar's\n   * halves. `true`: a line for the eye only (`role=\"none\"`), for a divider that\n   * separates nothing the structure does not already separate.\n   */\n  decorative?: boolean;\n}\n\n/**\n * A hairline between two things.\n *\n * kastlan's other Radix leftover. `aria-orientation` is set only when vertical:\n * horizontal is the role's default, and stating a default is noise in every reader's\n * verbose mode.\n */\nexport function Separator({ orientation = \"horizontal\", decorative = false, className, ...rest }: SeparatorProps) {\n  const vertical = orientation === \"vertical\";\n  return (\n    <div\n      {...rest}\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={!decorative && vertical ? \"vertical\" : undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-[var(--border)]\",\n        vertical ? \"w-px self-stretch\" : \"h-px w-full\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AAwBI;AAvBJ,SAAS,UAAU;AAoBZ,SAAS,UAAU,EAAE,cAAc,cAAc,aAAa,OAAO,WAAW,GAAG,KAAK,GAAmB;AAChH,QAAM,WAAW,gBAAgB;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,aAAa,SAAS;AAAA,MAC5B,oBAAkB,CAAC,cAAc,WAAW,aAAa;AAAA,MACzD,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,WAAW,sBAAsB;AAAA,QACjC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/series-chart-ticks.d.ts

@@ -9,5 +9,38 @@ declare function niceStep(span: number, target?: number): number;
  * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.
  */
 declare function niceTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
+/**
+ * {@link niceTicks} on whole numbers only: the step never drops below 1, so a short
+ * index series (a domain of [-0.2, 4.2]) is ticked 0 1 2 3 4 instead of every half.
+ * `undefined` when the window holds no whole number at all, so the caller can fall
+ * back to the fractional ticks of a deep zoom rather than show none.
+ */
+declare function integerTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
+/**
+ * The slots of a CATEGORY axis that lie inside a window over their positions.
+ *
+ * `SeriesChart` draws a category axis on the slot INDEX (see `x.type: "category"`), so a
+ * zoom window is a range of fractional positions — [2.6, 8.3] after a drag across the
+ * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in
+ * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.
+ */
+declare function categoryTicks(domain: readonly [number, number] | undefined, count: number): number[] | undefined;
+/** What one tick of a time axis stands for, which is also how its label is written. */
+type TimeTickUnit = "hour" | "day" | "month" | "year";
+/**
+ * Calendar ticks inside a window of epoch milliseconds — midnights, Mondays, month and
+ * quarter starts, new years, in LOCAL time — and the unit they are in, so the label can
+ * say as much as the tick means ("Mar 26" for a month start, "14 Mar" for a day).
+ *
+ * The time counterpart of {@link niceTicks}: a 1/2/5 ladder over raw milliseconds lands
+ * on 5 × 10⁹ ms, every 58 days, at whatever hour that happens to be. keksdose's price
+ * history and cash buffer each thinned their own ticks by hand for exactly this reason.
+ */
+declare function timeTicksWithUnit(domain: readonly [number, number] | undefined, target?: number): {
+    ticks: number[];
+    unit: TimeTickUnit;
+} | undefined;
+/** {@link timeTicksWithUnit}, ticks only. */
+declare function timeTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
 
-export { niceStep, niceTicks };
+export { type TimeTickUnit, categoryTicks, integerTicks, niceStep, niceTicks, timeTicks, timeTicksWithUnit };

package/dist/components/series-chart-ticks.js

@@ -22,8 +22,90 @@ function niceTicks(domain, target = TARGET_TICKS) {
   }
   return ticks.length ? ticks : void 0;
 }
+function integerTicks(domain, target = TARGET_TICKS) {
+  if (!domain) return void 0;
+  const [low, high] = domain;
+  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high >= low)) return void 0;
+  const step = high > low ? Math.max(1, niceStep(high - low, target)) : 1;
+  const ticks = [];
+  const first = Math.ceil(low / step - 1e-6);
+  const last = Math.floor(high / step + 1e-6);
+  for (let k = first; k <= last; k++) ticks.push(k * step + 0);
+  return ticks.length ? ticks : void 0;
+}
+function categoryTicks(domain, count) {
+  if (!domain || !(count > 0)) return void 0;
+  const first = Math.max(0, Math.ceil(domain[0] - 1e-6));
+  const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));
+  const ticks = [];
+  for (let slot = first; slot <= last; slot++) ticks.push(slot);
+  return ticks.length ? ticks : void 0;
+}
+const HOUR = 36e5;
+const DAY = 24 * HOUR;
+const TIME_STEPS = [
+  { unit: "hour", n: 1, ms: HOUR },
+  { unit: "hour", n: 3, ms: 3 * HOUR },
+  { unit: "hour", n: 6, ms: 6 * HOUR },
+  { unit: "hour", n: 12, ms: 12 * HOUR },
+  { unit: "day", n: 1, ms: DAY },
+  { unit: "day", n: 2, ms: 2 * DAY },
+  { unit: "day", n: 7, ms: 7 * DAY },
+  { unit: "month", n: 1, ms: 30.44 * DAY },
+  { unit: "month", n: 2, ms: 60.88 * DAY },
+  { unit: "month", n: 3, ms: 91.31 * DAY },
+  { unit: "month", n: 6, ms: 182.62 * DAY }
+];
+function timeTicksWithUnit(domain, target = TARGET_TICKS) {
+  if (!domain) return void 0;
+  const [low, high] = domain;
+  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return void 0;
+  const rough = (high - low) / Math.max(1, target);
+  let unit = "year";
+  let n = 1;
+  let best = Infinity;
+  for (const step of TIME_STEPS) {
+    const miss = Math.abs(Math.log(step.ms / rough));
+    if (miss < best) {
+      best = miss;
+      unit = step.unit;
+      n = step.n;
+    }
+  }
+  const yearN = Math.max(1, Math.round(niceStep((high - low) / (365.25 * DAY), target)));
+  if (Math.abs(Math.log(yearN * 365.25 * DAY / rough)) < best) {
+    unit = "year";
+    n = yearN;
+  }
+  const start = new Date(low);
+  start.setMinutes(0, 0, 0);
+  if (unit !== "hour") start.setHours(0);
+  if (unit === "month" || unit === "year") start.setDate(1);
+  if (unit === "year") start.setMonth(0);
+  if (unit === "hour") start.setHours(start.getHours() - start.getHours() % n);
+  if (unit === "day" && n === 7) start.setDate(start.getDate() - (start.getDay() + 6) % 7);
+  if (unit === "month") start.setMonth(start.getMonth() - start.getMonth() % n);
+  if (unit === "year") start.setFullYear(start.getFullYear() - start.getFullYear() % n);
+  const ticks = [];
+  const at = new Date(start);
+  for (let guard = 0; guard < 1e3 && at.getTime() <= high; guard++) {
+    if (at.getTime() >= low) ticks.push(at.getTime());
+    if (unit === "hour") at.setHours(at.getHours() + n);
+    else if (unit === "day") at.setDate(at.getDate() + n);
+    else if (unit === "month") at.setMonth(at.getMonth() + n);
+    else at.setFullYear(at.getFullYear() + n);
+  }
+  return ticks.length ? { ticks, unit } : void 0;
+}
+function timeTicks(domain, target = TARGET_TICKS) {
+  return timeTicksWithUnit(domain, target)?.ticks;
+}
 export {
+  categoryTicks,
+  integerTicks,
   niceStep,
-  niceTicks
+  niceTicks,
+  timeTicks,
+  timeTicksWithUnit
 };
 //# sourceMappingURL=series-chart-ticks.js.map

package/dist/components/series-chart-ticks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/series-chart-ticks.ts"],"sourcesContent":["// Round tick values for `SeriesChart` — internal, not re-exported by `@eifi1/ui-kit/chart`.\n//\n// Handed an explicit numeric domain, recharts divides it into equal parts and prints\n// wherever those land: a fitted band of [-11, 811] comes out as -11, 189, 389 … and a\n// padded [89, 1011] as 89, 289, 489 — numbers nobody can put a ruler against. These\n// are the ticks a person would draw instead: every multiple of a 1, 2 or 5 × 10^n step\n// that lies INSIDE the domain. The domain itself is left alone, so the 4 % of air the\n// fit leaves and a zoom window's exact edges both survive; the frame simply does not\n// get a number of its own.\n\n/** Roughly how many ticks to aim for. The 1/2/5 ladder lands anywhere from about half\n *  to about twice this, which is the price of every tick being a round number. */\nconst TARGET_TICKS = 5;\n\n/** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */\nexport function niceStep(span: number, target: number = TARGET_TICKS): number {\n  const rough = span / Math.max(1, target);\n  const magnitude = 10 ** Math.floor(Math.log10(rough));\n  const norm = rough / magnitude;\n  const factor = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10;\n  return factor * magnitude;\n}\n\n/**\n * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no\n * span to divide (no domain, a zero-height one, anything non-finite), which leaves the\n * choice to recharts.\n *\n * Each tick is computed as `k × step` and then rounded to the step's own decimals:\n * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.\n */\nexport function niceTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const step = niceStep(high - low, target);\n  if (!(step > 0) || !Number.isFinite(step)) return undefined;\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)));\n  const ticks: number[] = [];\n  // Half a step's tolerance per end would admit ticks outside the frame; a millionth\n  // of one only forgives the float error in `low / step`.\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) {\n    // `+ 0` turns the -0 that `Number(\"-0.00\")` gives back into a plain 0.\n    ticks.push(Number((k * step).toFixed(decimals)) + 0);\n  }\n  return ticks.length ? ticks : undefined;\n}\n"],"mappings":";AAYA,MAAM,eAAe;AAGd,SAAS,SAAS,MAAc,SAAiB,cAAsB;AAC5E,QAAM,QAAQ,OAAO,KAAK,IAAI,GAAG,MAAM;AACvC,QAAM,YAAY,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,CAAC;AACpD,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,OAAO,MAAM,IAAI,OAAO,IAAI,IAAI,OAAO,IAAI,IAAI;AAC9D,SAAO,SAAS;AAClB;AAUO,SAAS,UACd,QACA,SAAiB,cACK;AACtB,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,CAAC,KAAK,IAAI,IAAI;AACpB,MAAI,CAAC,OAAO,SAAS,GAAG,KAAK,CAAC,OAAO,SAAS,IAAI,KAAK,EAAE,OAAO,KAAM,QAAO;AAC7E,QAAM,OAAO,SAAS,OAAO,KAAK,MAAM;AACxC,MAAI,EAAE,OAAO,MAAM,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AAClD,QAAM,WAAW,KAAK,IAAI,GAAG,CAAC,KAAK,MAAM,KAAK,MAAM,IAAI,CAAC,CAAC;AAC1D,QAAM,QAAkB,CAAC;AAGzB,QAAM,QAAQ,KAAK,KAAK,MAAM,OAAO,IAAI;AACzC,QAAM,OAAO,KAAK,MAAM,OAAO,OAAO,IAAI;AAC1C,WAAS,IAAI,OAAO,KAAK,MAAM,KAAK;AAElC,UAAM,KAAK,QAAQ,IAAI,MAAM,QAAQ,QAAQ,CAAC,IAAI,CAAC;AAAA,EACrD;AACA,SAAO,MAAM,SAAS,QAAQ;AAChC;","names":[]}
+{"version":3,"sources":["../../src/components/series-chart-ticks.ts"],"sourcesContent":["// Round tick values for `SeriesChart` — internal, not re-exported by `@eifi1/ui-kit/chart`.\n//\n// Handed an explicit numeric domain, recharts divides it into equal parts and prints\n// wherever those land: a fitted band of [-11, 811] comes out as -11, 189, 389 … and a\n// padded [89, 1011] as 89, 289, 489 — numbers nobody can put a ruler against. These\n// are the ticks a person would draw instead: every multiple of a 1, 2 or 5 × 10^n step\n// that lies INSIDE the domain. The domain itself is left alone, so the 4 % of air the\n// fit leaves and a zoom window's exact edges both survive; the frame simply does not\n// get a number of its own.\n\n/** Roughly how many ticks to aim for. The 1/2/5 ladder lands anywhere from about half\n *  to about twice this, which is the price of every tick being a round number. */\nconst TARGET_TICKS = 5;\n\n/** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */\nexport function niceStep(span: number, target: number = TARGET_TICKS): number {\n  const rough = span / Math.max(1, target);\n  const magnitude = 10 ** Math.floor(Math.log10(rough));\n  const norm = rough / magnitude;\n  const factor = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10;\n  return factor * magnitude;\n}\n\n/**\n * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no\n * span to divide (no domain, a zero-height one, anything non-finite), which leaves the\n * choice to recharts.\n *\n * Each tick is computed as `k × step` and then rounded to the step's own decimals:\n * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.\n */\nexport function niceTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const step = niceStep(high - low, target);\n  if (!(step > 0) || !Number.isFinite(step)) return undefined;\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)));\n  const ticks: number[] = [];\n  // Half a step's tolerance per end would admit ticks outside the frame; a millionth\n  // of one only forgives the float error in `low / step`.\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) {\n    // `+ 0` turns the -0 that `Number(\"-0.00\")` gives back into a plain 0.\n    ticks.push(Number((k * step).toFixed(decimals)) + 0);\n  }\n  return ticks.length ? ticks : undefined;\n}\n\n/**\n * {@link niceTicks} on whole numbers only: the step never drops below 1, so a short\n * index series (a domain of [-0.2, 4.2]) is ticked 0 1 2 3 4 instead of every half.\n * `undefined` when the window holds no whole number at all, so the caller can fall\n * back to the fractional ticks of a deep zoom rather than show none.\n */\nexport function integerTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high >= low)) return undefined;\n  const step = high > low ? Math.max(1, niceStep(high - low, target)) : 1;\n  const ticks: number[] = [];\n  const first = Math.ceil(low / step - 1e-6);\n  const last = Math.floor(high / step + 1e-6);\n  for (let k = first; k <= last; k++) ticks.push(k * step + 0);\n  return ticks.length ? ticks : undefined;\n}\n\n/**\n * The slots of a CATEGORY axis that lie inside a window over their positions.\n *\n * `SeriesChart` draws a category axis on the slot INDEX (see `x.type: \"category\"`), so a\n * zoom window is a range of fractional positions — [2.6, 8.3] after a drag across the\n * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in\n * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.\n */\nexport function categoryTicks(\n  domain: readonly [number, number] | undefined,\n  count: number,\n): number[] | undefined {\n  if (!domain || !(count > 0)) return undefined;\n  const first = Math.max(0, Math.ceil(domain[0] - 1e-6));\n  const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));\n  const ticks: number[] = [];\n  for (let slot = first; slot <= last; slot++) ticks.push(slot);\n  return ticks.length ? ticks : undefined;\n}\n\n/** What one tick of a time axis stands for, which is also how its label is written. */\nexport type TimeTickUnit = \"hour\" | \"day\" | \"month\" | \"year\";\n\nconst HOUR = 3_600_000;\nconst DAY = 24 * HOUR;\n\n/**\n * The calendar steps a time axis may tick in, with their rough length for choosing.\n * Months and years are stepped with `Date` setters, not by adding their \"length\":\n * thirty days from the 1st of February is the 3rd of March, and a tick that promises a\n * month start and prints the 3rd is the ruler lying.\n */\nconst TIME_STEPS: readonly { unit: TimeTickUnit; n: number; ms: number }[] = [\n  { unit: \"hour\", n: 1, ms: HOUR },\n  { unit: \"hour\", n: 3, ms: 3 * HOUR },\n  { unit: \"hour\", n: 6, ms: 6 * HOUR },\n  { unit: \"hour\", n: 12, ms: 12 * HOUR },\n  { unit: \"day\", n: 1, ms: DAY },\n  { unit: \"day\", n: 2, ms: 2 * DAY },\n  { unit: \"day\", n: 7, ms: 7 * DAY },\n  { unit: \"month\", n: 1, ms: 30.44 * DAY },\n  { unit: \"month\", n: 2, ms: 60.88 * DAY },\n  { unit: \"month\", n: 3, ms: 91.31 * DAY },\n  { unit: \"month\", n: 6, ms: 182.62 * DAY },\n];\n\n/**\n * Calendar ticks inside a window of epoch milliseconds — midnights, Mondays, month and\n * quarter starts, new years, in LOCAL time — and the unit they are in, so the label can\n * say as much as the tick means (\"Mar 26\" for a month start, \"14 Mar\" for a day).\n *\n * The time counterpart of {@link niceTicks}: a 1/2/5 ladder over raw milliseconds lands\n * on 5 × 10⁹ ms, every 58 days, at whatever hour that happens to be. keksdose's price\n * history and cash buffer each thinned their own ticks by hand for exactly this reason.\n */\nexport function timeTicksWithUnit(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): { ticks: number[]; unit: TimeTickUnit } | undefined {\n  if (!domain) return undefined;\n  const [low, high] = domain;\n  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;\n  const rough = (high - low) / Math.max(1, target);\n  let unit: TimeTickUnit = \"year\";\n  let n = 1;\n  let best = Infinity;\n  for (const step of TIME_STEPS) {\n    const miss = Math.abs(Math.log(step.ms / rough));\n    if (miss < best) {\n      best = miss;\n      unit = step.unit;\n      n = step.n;\n    }\n  }\n  // The year ladder competes on the same terms as the table: one year is 365.25 days.\n  const yearN = Math.max(1, Math.round(niceStep((high - low) / (365.25 * DAY), target)));\n  if (Math.abs(Math.log((yearN * 365.25 * DAY) / rough)) < best) {\n    unit = \"year\";\n    n = yearN;\n  }\n\n  const start = new Date(low);\n  start.setMinutes(0, 0, 0);\n  if (unit !== \"hour\") start.setHours(0);\n  if (unit === \"month\" || unit === \"year\") start.setDate(1);\n  if (unit === \"year\") start.setMonth(0);\n  // Onto the step's own grid: hours of the day, Mondays, month indices, years — so a\n  // zoom window starting on a Wednesday still ticks on Mondays.\n  if (unit === \"hour\") start.setHours(start.getHours() - (start.getHours() % n));\n  if (unit === \"day\" && n === 7) start.setDate(start.getDate() - ((start.getDay() + 6) % 7));\n  if (unit === \"month\") start.setMonth(start.getMonth() - (start.getMonth() % n));\n  if (unit === \"year\") start.setFullYear(start.getFullYear() - (start.getFullYear() % n));\n\n  const ticks: number[] = [];\n  const at = new Date(start);\n  // Bounded, so a window of a million years cannot hang the render.\n  for (let guard = 0; guard < 1000 && at.getTime() <= high; guard++) {\n    if (at.getTime() >= low) ticks.push(at.getTime());\n    if (unit === \"hour\") at.setHours(at.getHours() + n);\n    else if (unit === \"day\") at.setDate(at.getDate() + n);\n    else if (unit === \"month\") at.setMonth(at.getMonth() + n);\n    else at.setFullYear(at.getFullYear() + n);\n  }\n  return ticks.length ? { ticks, unit } : undefined;\n}\n\n/** {@link timeTicksWithUnit}, ticks only. */\nexport function timeTicks(\n  domain: readonly [number, number] | undefined,\n  target: number = TARGET_TICKS,\n): number[] | undefined {\n  return timeTicksWithUnit(domain, target)?.ticks;\n}\n"],"mappings":"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","names":[]}