@gunkin/uiify 0.0.1-alpha

package/dist/components/candle-chart/CandleChart.js

@@ -0,0 +1,287 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+function percent(value) {
+  const rounded = Math.round(value * 1e4) / 1e4;
+  return `${rounded}%`;
+}
+function valueToPercent(value, min, range) {
+  if (range === 0) return 50;
+  return Math.min(100, Math.max(0, (min + range - value) / range * 100));
+}
+function directionFor(candle) {
+  if (candle.close > candle.open) return "up";
+  if (candle.close < candle.open) return "down";
+  return "flat";
+}
+function getPriceBounds(data) {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const candle of data) {
+    min = Math.min(min, candle.low);
+    max = Math.max(max, candle.high);
+  }
+  if (data.length === 0) return { max: 1, min: 0 };
+  return { max, min };
+}
+function monthKey(time) {
+  const date = new Date(time);
+  if (Number.isNaN(date.getTime())) return String(time);
+  return `${date.getUTCFullYear()}-${date.getUTCMonth()}`;
+}
+function monthLabel(time) {
+  const date = new Date(time);
+  if (Number.isNaN(date.getTime())) return String(time);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    timeZone: "UTC",
+    year: "2-digit"
+  }).format(date);
+}
+function monthLabelsFor(data) {
+  const labels = [];
+  const seen = /* @__PURE__ */ new Set();
+  data.forEach((candle, index) => {
+    const key = monthKey(candle.time);
+    if (seen.has(key)) return;
+    seen.add(key);
+    labels.push({
+      label: monthLabel(candle.time),
+      position: index / Math.max(data.length, 1) * 100
+    });
+  });
+  return labels;
+}
+function priceLabelsFor(min, max) {
+  const tickCount = 6;
+  const range = max - min;
+  return Array.from({ length: tickCount }, (_, index) => {
+    const ratio = index / (tickCount - 1);
+    const value = max - range * ratio;
+    return {
+      label: new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(value),
+      position: ratio * 100
+    };
+  });
+}
+function geometryFor(candle, index, count, min, max) {
+  const range = max - min;
+  const open = valueToPercent(candle.open, min, range);
+  const close = valueToPercent(candle.close, min, range);
+  const high = valueToPercent(candle.high, min, range);
+  const low = valueToPercent(candle.low, min, range);
+  return {
+    bodyHeight: percent(Math.abs(close - open)),
+    bodyTop: percent(Math.min(open, close)),
+    direction: directionFor(candle),
+    slot: percent(100 / count),
+    wickHeight: percent(Math.max(0, low - high)),
+    wickTop: percent(high),
+    x: percent(index / count * 100)
+  };
+}
+function candleStyle(geometry, cursorY) {
+  return {
+    "--candle-body-height": geometry.bodyHeight,
+    "--candle-body-top": geometry.bodyTop,
+    "--candle-slot": geometry.slot,
+    "--candle-wick-height": geometry.wickHeight,
+    "--candle-wick-top": geometry.wickTop,
+    "--candle-x": geometry.x,
+    ...cursorY === void 0 ? {} : { "--candle-cursor-y": `${Math.max(0, cursorY)}px` }
+  };
+}
+function crosshairStyle(index, count, cursorY) {
+  return {
+    "--candle-crosshair-x": percent((index + 0.5) / Math.max(count, 1) * 100),
+    ...cursorY === void 0 ? {} : { "--candle-cursor-y": `${Math.max(0, cursorY)}px` }
+  };
+}
+function cursorStyle(cursorY) {
+  return cursorY === void 0 ? {} : { "--candle-cursor-y": `${Math.max(0, cursorY)}px` };
+}
+function clampAxisPosition(position) {
+  return Math.min(100, Math.max(0, position));
+}
+function axisStyle(axis, position) {
+  const value = percent(clampAxisPosition(position));
+  if (axis === "x") return { "--candle-axis-x": value };
+  return { "--candle-axis-y": value };
+}
+function axisLabelsFor(overrides, fallback) {
+  return overrides ?? fallback;
+}
+function CandleChart(props) {
+  const {
+    as,
+    render,
+    data,
+    xAxis,
+    yAxis,
+    "aria-label": ariaLabel,
+    activeCandleIndex,
+    cursorY,
+    interactive = false,
+    onCandleClick,
+    onCandlePointerLeave,
+    onCandlePointerMove,
+    selectedCandleIndex,
+    ...consumerProps
+  } = props;
+  const { min, max } = getPriceBounds(data);
+  const label = ariaLabel ?? "Candlestick chart";
+  const monthLabels = axisLabelsFor(xAxis, monthLabelsFor(data));
+  const priceLabels = axisLabelsFor(yAxis, priceLabelsFor(min, max));
+  const readoutIndex = activeCandleIndex ?? selectedCandleIndex ?? (data.length > 0 ? data.length - 1 : void 0);
+  const readoutCandle = readoutIndex === void 0 ? void 0 : data[readoutIndex];
+  const crosshairCandle = activeCandleIndex === void 0 ? void 0 : data[activeCandleIndex];
+  const candles = data.map((candle, index) => {
+    const geometry = geometryFor(candle, index, data.length, min, max);
+    const isActive = activeCandleIndex === index;
+    const isSelected = selectedCandleIndex === index;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      onCandleClick?.(index);
+    };
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        "aria-hidden": interactive ? void 0 : true,
+        "data-direction": geometry.direction,
+        "data-crosshair-active": interactive && isActive ? "" : void 0,
+        "data-time": String(candle.time),
+        style: candleStyle(geometry, isActive ? cursorY : void 0),
+        children: interactive ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "candle-chart__candle-hit",
+            type: "button",
+            "aria-label": `Candle ${String(candle.time)}`,
+            "aria-pressed": isSelected,
+            onClick: () => onCandleClick?.(index),
+            onKeyDown: handleKeyDown,
+            onPointerLeave: onCandlePointerLeave,
+            onPointerMove: (event) => onCandlePointerMove?.({ index, offsetY: event.nativeEvent.offsetY })
+          }
+        ) : null
+      },
+      `${candle.time}-${index}`
+    );
+  });
+  return useRenderElement({
+    as,
+    defaultTag: "figure",
+    props: {
+      ...consumerProps,
+      "aria-label": label,
+      "data-uiify-candle-chart": "",
+      "data-interactive": interactive ? "" : void 0,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("figcaption", { children: label }),
+        interactive && readoutCandle ? /* @__PURE__ */ jsxs("div", { className: "candle-chart__readout", "aria-live": "polite", children: [
+          /* @__PURE__ */ jsx("span", { className: "candle-chart__readout-time", children: String(readoutCandle.time) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "O ",
+            readoutCandle.open
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "H ",
+            readoutCandle.high
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "L ",
+            readoutCandle.low
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "C ",
+            readoutCandle.close
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "candle-chart__plot", "aria-hidden": interactive ? void 0 : true, children: [
+          /* @__PURE__ */ jsx("div", { className: "candle-chart__scroll-viewport", children: /* @__PURE__ */ jsxs("div", { className: "candle-chart__canvas", children: [
+            /* @__PURE__ */ jsxs("div", { className: "candle-chart__viewport", children: [
+              /* @__PURE__ */ jsx("ol", { className: "candle-chart__candles", "aria-label": `${label} candles`, children: candles }),
+              interactive && crosshairCandle && activeCandleIndex !== void 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "candle-chart__crosshair",
+                  "aria-hidden": "true",
+                  style: crosshairStyle(activeCandleIndex, data.length, cursorY),
+                  children: /* @__PURE__ */ jsx("span", { className: "candle-chart__crosshair-marker", children: "+" })
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "candle-chart__time-viewport", children: /* @__PURE__ */ jsxs(
+              "ol",
+              {
+                className: "candle-chart__time-axis",
+                "data-axis": "time",
+                "aria-label": `${label} months`,
+                children: [
+                  monthLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      style: axisStyle("x", axisLabel.position),
+                      children: axisLabel.label
+                    },
+                    `${axisLabel.position}-${index}`
+                  )),
+                  interactive && crosshairCandle && activeCandleIndex !== void 0 ? /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: "candle-chart__crosshair-time",
+                      style: crosshairStyle(activeCandleIndex, data.length, void 0),
+                      children: String(crosshairCandle.time)
+                    }
+                  ) : null
+                ]
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            "ol",
+            {
+              className: "candle-chart__price-axis",
+              "data-axis": "price",
+              "aria-label": `${label} prices`,
+              children: [
+                priceLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    style: axisStyle("y", axisLabel.position),
+                    children: axisLabel.label
+                  },
+                  `${axisLabel.position}-${index}`
+                )),
+                interactive && crosshairCandle && activeCandleIndex !== void 0 ? /* @__PURE__ */ jsx("li", { className: "candle-chart__crosshair-price", style: cursorStyle(cursorY), children: crosshairCandle.close }) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("table", { className: "candle-chart__data", "aria-label": `${label} data`, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Time" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Open" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "High" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Low" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Close" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: data.map((candle, index) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: String(candle.time) }),
+            /* @__PURE__ */ jsx("td", { children: candle.open }),
+            /* @__PURE__ */ jsx("td", { children: candle.high }),
+            /* @__PURE__ */ jsx("td", { children: candle.low }),
+            /* @__PURE__ */ jsx("td", { children: candle.close })
+          ] }, `${candle.time}-${index}`)) })
+        ] })
+      ] })
+    },
+    render,
+    state: {}
+  });
+}
+CandleChart.displayName = "CandleChart";
+export {
+  CandleChart
+};
+//# sourceMappingURL=CandleChart.js.map

package/dist/components/candle-chart/CandleChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/candle-chart/CandleChart.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  ElementType,\n  KeyboardEvent,\n  PointerEvent,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type { CandleChartAxisLabel, CandleChartData, CandleChartProps } from \"./types.js\";\n\ninterface CandleStyle extends CSSProperties {\n  \"--candle-body-height\": string;\n  \"--candle-body-top\": string;\n  \"--candle-slot\": string;\n  \"--candle-wick-height\": string;\n  \"--candle-wick-top\": string;\n  \"--candle-x\": string;\n  \"--candle-cursor-y\"?: string;\n}\n\ninterface CrosshairStyle extends CSSProperties {\n  \"--candle-crosshair-x\": string;\n  \"--candle-cursor-y\"?: string;\n}\n\ninterface CursorStyle extends CSSProperties {\n  \"--candle-cursor-y\"?: string;\n}\n\ninterface AxisStyle extends CSSProperties {\n  \"--candle-axis-x\"?: string;\n  \"--candle-axis-y\"?: string;\n}\n\ntype CandleDirection = \"down\" | \"flat\" | \"up\";\n\ninterface CandleGeometry {\n  readonly bodyHeight: string;\n  readonly bodyTop: string;\n  readonly direction: CandleDirection;\n  readonly slot: string;\n  readonly wickHeight: string;\n  readonly wickTop: string;\n  readonly x: string;\n}\n\nfunction percent(value: number): string {\n  const rounded = Math.round(value * 10000) / 10000;\n  return `${rounded}%`;\n}\n\nfunction valueToPercent(value: number, min: number, range: number): number {\n  if (range === 0) return 50;\n  return Math.min(100, Math.max(0, ((min + range - value) / range) * 100));\n}\n\nfunction directionFor(candle: CandleChartData): CandleDirection {\n  if (candle.close > candle.open) return \"up\";\n  if (candle.close < candle.open) return \"down\";\n  return \"flat\";\n}\n\nfunction getPriceBounds(data: readonly CandleChartData[]): { max: number; min: number } {\n  let min = Number.POSITIVE_INFINITY;\n  let max = Number.NEGATIVE_INFINITY;\n\n  for (const candle of data) {\n    min = Math.min(min, candle.low);\n    max = Math.max(max, candle.high);\n  }\n\n  if (data.length === 0) return { max: 1, min: 0 };\n  return { max, min };\n}\n\ninterface AxisLabel {\n  readonly label: ReactNode;\n  readonly position: number;\n}\n\nfunction monthKey(time: string | number): string {\n  const date = new Date(time);\n  if (Number.isNaN(date.getTime())) return String(time);\n  return `${date.getUTCFullYear()}-${date.getUTCMonth()}`;\n}\n\nfunction monthLabel(time: string | number): string {\n  const date = new Date(time);\n  if (Number.isNaN(date.getTime())) return String(time);\n  return new Intl.DateTimeFormat(\"en-US\", {\n    month: \"short\",\n    timeZone: \"UTC\",\n    year: \"2-digit\",\n  }).format(date);\n}\n\nfunction monthLabelsFor(data: readonly CandleChartData[]): AxisLabel[] {\n  const labels: AxisLabel[] = [];\n  const seen = new Set<string>();\n\n  data.forEach((candle, index) => {\n    const key = monthKey(candle.time);\n    if (seen.has(key)) return;\n    seen.add(key);\n    labels.push({\n      label: monthLabel(candle.time),\n      position: (index / Math.max(data.length, 1)) * 100,\n    });\n  });\n\n  return labels;\n}\n\nfunction priceLabelsFor(min: number, max: number): AxisLabel[] {\n  const tickCount = 6;\n  const range = max - min;\n\n  return Array.from({ length: tickCount }, (_, index) => {\n    const ratio = index / (tickCount - 1);\n    const value = max - range * ratio;\n    return {\n      label: new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 2 }).format(value),\n      position: ratio * 100,\n    };\n  });\n}\n\nfunction geometryFor(\n  candle: CandleChartData,\n  index: number,\n  count: number,\n  min: number,\n  max: number,\n): CandleGeometry {\n  const range = max - min;\n  const open = valueToPercent(candle.open, min, range);\n  const close = valueToPercent(candle.close, min, range);\n  const high = valueToPercent(candle.high, min, range);\n  const low = valueToPercent(candle.low, min, range);\n\n  return {\n    bodyHeight: percent(Math.abs(close - open)),\n    bodyTop: percent(Math.min(open, close)),\n    direction: directionFor(candle),\n    slot: percent(100 / count),\n    wickHeight: percent(Math.max(0, low - high)),\n    wickTop: percent(high),\n    x: percent((index / count) * 100),\n  };\n}\n\nfunction candleStyle(geometry: CandleGeometry, cursorY: number | undefined): CandleStyle {\n  return {\n    \"--candle-body-height\": geometry.bodyHeight,\n    \"--candle-body-top\": geometry.bodyTop,\n    \"--candle-slot\": geometry.slot,\n    \"--candle-wick-height\": geometry.wickHeight,\n    \"--candle-wick-top\": geometry.wickTop,\n    \"--candle-x\": geometry.x,\n    ...(cursorY === undefined ? {} : { \"--candle-cursor-y\": `${Math.max(0, cursorY)}px` }),\n  };\n}\n\nfunction crosshairStyle(index: number, count: number, cursorY: number | undefined): CrosshairStyle {\n  return {\n    \"--candle-crosshair-x\": percent(((index + 0.5) / Math.max(count, 1)) * 100),\n    ...(cursorY === undefined ? {} : { \"--candle-cursor-y\": `${Math.max(0, cursorY)}px` }),\n  };\n}\n\nfunction cursorStyle(cursorY: number | undefined): CursorStyle {\n  return cursorY === undefined ? {} : { \"--candle-cursor-y\": `${Math.max(0, cursorY)}px` };\n}\n\nfunction clampAxisPosition(position: number): number {\n  return Math.min(100, Math.max(0, position));\n}\n\nfunction axisStyle(axis: \"x\" | \"y\", position: number): AxisStyle {\n  const value = percent(clampAxisPosition(position));\n  if (axis === \"x\") return { \"--candle-axis-x\": value };\n  return { \"--candle-axis-y\": value };\n}\n\nfunction axisLabelsFor(\n  overrides: readonly CandleChartAxisLabel[] | undefined,\n  fallback: readonly AxisLabel[],\n): readonly AxisLabel[] {\n  return overrides ?? fallback;\n}\n\nexport function CandleChart<TAs extends ElementType = \"figure\">(\n  props: CandleChartProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    data,\n    xAxis,\n    yAxis,\n    \"aria-label\": ariaLabel,\n    activeCandleIndex,\n    cursorY,\n    interactive = false,\n    onCandleClick,\n    onCandlePointerLeave,\n    onCandlePointerMove,\n    selectedCandleIndex,\n    ...consumerProps\n  } = props as CandleChartProps<\"figure\">;\n  const { min, max } = getPriceBounds(data);\n  const label = ariaLabel ?? \"Candlestick chart\";\n  const monthLabels = axisLabelsFor(xAxis, monthLabelsFor(data));\n  const priceLabels = axisLabelsFor(yAxis, priceLabelsFor(min, max));\n  const readoutIndex =\n    activeCandleIndex ?? selectedCandleIndex ?? (data.length > 0 ? data.length - 1 : undefined);\n  const readoutCandle = readoutIndex === undefined ? undefined : data[readoutIndex];\n  const crosshairCandle = activeCandleIndex === undefined ? undefined : data[activeCandleIndex];\n  const candles = data.map((candle, index) => {\n    const geometry = geometryFor(candle, index, data.length, min, max);\n    const isActive = activeCandleIndex === index;\n    const isSelected = selectedCandleIndex === index;\n    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      if (event.key !== \"Enter\" && event.key !== \" \") return;\n      event.preventDefault();\n      onCandleClick?.(index);\n    };\n\n    return (\n      <li\n        key={`${candle.time}-${index}`}\n        aria-hidden={interactive ? undefined : true}\n        data-direction={geometry.direction}\n        data-crosshair-active={interactive && isActive ? \"\" : undefined}\n        data-time={String(candle.time)}\n        style={candleStyle(geometry, isActive ? cursorY : undefined)}\n      >\n        {interactive ? (\n          <button\n            className=\"candle-chart__candle-hit\"\n            type=\"button\"\n            aria-label={`Candle ${String(candle.time)}`}\n            aria-pressed={isSelected}\n            onClick={() => onCandleClick?.(index)}\n            onKeyDown={handleKeyDown}\n            onPointerLeave={onCandlePointerLeave}\n            onPointerMove={(event: PointerEvent<HTMLButtonElement>) =>\n              onCandlePointerMove?.({ index, offsetY: event.nativeEvent.offsetY })\n            }\n          />\n        ) : null}\n      </li>\n    );\n  });\n\n  return useRenderElement({\n    as,\n    defaultTag: \"figure\",\n    props: {\n      ...consumerProps,\n      \"aria-label\": label,\n      \"data-uiify-candle-chart\": \"\",\n      \"data-interactive\": interactive ? \"\" : undefined,\n      children: (\n        <>\n          <figcaption>{label}</figcaption>\n          {interactive && readoutCandle ? (\n            <div className=\"candle-chart__readout\" aria-live=\"polite\">\n              <span className=\"candle-chart__readout-time\">{String(readoutCandle.time)}</span>\n              <span>O {readoutCandle.open}</span>\n              <span>H {readoutCandle.high}</span>\n              <span>L {readoutCandle.low}</span>\n              <span>C {readoutCandle.close}</span>\n            </div>\n          ) : null}\n          <div className=\"candle-chart__plot\" aria-hidden={interactive ? undefined : true}>\n            <div className=\"candle-chart__scroll-viewport\">\n              <div className=\"candle-chart__canvas\">\n                <div className=\"candle-chart__viewport\">\n                  <ol className=\"candle-chart__candles\" aria-label={`${label} candles`}>\n                    {candles}\n                  </ol>\n                  {interactive && crosshairCandle && activeCandleIndex !== undefined ? (\n                    <div\n                      className=\"candle-chart__crosshair\"\n                      aria-hidden=\"true\"\n                      style={crosshairStyle(activeCandleIndex, data.length, cursorY)}\n                    >\n                      <span className=\"candle-chart__crosshair-marker\">+</span>\n                    </div>\n                  ) : null}\n                </div>\n                <div className=\"candle-chart__time-viewport\">\n                  <ol\n                    className=\"candle-chart__time-axis\"\n                    data-axis=\"time\"\n                    aria-label={`${label} months`}\n                  >\n                    {monthLabels.map((axisLabel, index) => (\n                      <li\n                        key={`${axisLabel.position}-${index}`}\n                        style={axisStyle(\"x\", axisLabel.position)}\n                      >\n                        {axisLabel.label}\n                      </li>\n                    ))}\n                    {interactive && crosshairCandle && activeCandleIndex !== undefined ? (\n                      <li\n                        className=\"candle-chart__crosshair-time\"\n                        style={crosshairStyle(activeCandleIndex, data.length, undefined)}\n                      >\n                        {String(crosshairCandle.time)}\n                      </li>\n                    ) : null}\n                  </ol>\n                </div>\n              </div>\n            </div>\n            <ol\n              className=\"candle-chart__price-axis\"\n              data-axis=\"price\"\n              aria-label={`${label} prices`}\n            >\n              {priceLabels.map((axisLabel, index) => (\n                <li\n                  key={`${axisLabel.position}-${index}`}\n                  style={axisStyle(\"y\", axisLabel.position)}\n                >\n                  {axisLabel.label}\n                </li>\n              ))}\n              {interactive && crosshairCandle && activeCandleIndex !== undefined ? (\n                <li className=\"candle-chart__crosshair-price\" style={cursorStyle(cursorY)}>\n                  {crosshairCandle.close}\n                </li>\n              ) : null}\n            </ol>\n          </div>\n          <table className=\"candle-chart__data\" aria-label={`${label} data`}>\n            <thead>\n              <tr>\n                <th scope=\"col\">Time</th>\n                <th scope=\"col\">Open</th>\n                <th scope=\"col\">High</th>\n                <th scope=\"col\">Low</th>\n                <th scope=\"col\">Close</th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((candle, index) => (\n                <tr key={`${candle.time}-${index}`}>\n                  <th scope=\"row\">{String(candle.time)}</th>\n                  <td>{candle.open}</td>\n                  <td>{candle.high}</td>\n                  <td>{candle.low}</td>\n                  <td>{candle.close}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nCandleChart.displayName = \"CandleChart\";\n"],"mappings":"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","names":[]}

package/dist/components/candle-chart/client/CandleChartClient.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType, ReactElement } from "react";
+import type { CandleChartProps } from "../types.js";
+export declare function CandleChartClient<TAs extends ElementType = "figure">(props: CandleChartProps<TAs>): ReactElement | null;
+export declare namespace CandleChartClient {
+    var displayName: string;
+}
+//# sourceMappingURL=CandleChartClient.d.ts.map

package/dist/components/candle-chart/client/CandleChartClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CandleChartClient.d.ts","sourceRoot":"","sources":["../../../../src/components/candle-chart/client/CandleChartClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAO,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAkBhF,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAClE,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAC3B,YAAY,GAAG,IAAI,CA2DrB;yBA7De,iBAAiB"}

package/dist/components/candle-chart/client/CandleChartClient.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { CandleChart } from "../CandleChart.js";
+import { useChartViewport } from "../../../hooks/use-chart-viewport.js";
+import { useMergedRefs } from "../../../hooks/use-merged-refs.js";
+const Y_AXIS_COLUMN_WIDTH = 72 + 12;
+function CandleChartClient(props) {
+  const {
+    data,
+    ref: consumerRef,
+    style: consumerStyle,
+    onCandleClick: consumerOnCandleClick,
+    onCandlePointerLeave: consumerOnCandlePointerLeave,
+    onCandlePointerMove: consumerOnCandlePointerMove,
+    ...consumerProps
+  } = props;
+  const viewport = useChartViewport({
+    itemCount: data.length,
+    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,
+    minItemWidth: 24
+  });
+  const [cursor, setCursor] = useState(null);
+  const [selectedCandleIndex, setSelectedCandleIndex] = useState();
+  const chartRef = useMergedRefs(viewport.ref, consumerRef);
+  const handleCandleClick = useCallback(
+    (index) => {
+      setSelectedCandleIndex(index);
+      consumerOnCandleClick?.(index);
+    },
+    [consumerOnCandleClick]
+  );
+  const handleCandlePointerLeave = useCallback(() => {
+    setCursor(null);
+    consumerOnCandlePointerLeave?.();
+  }, [consumerOnCandlePointerLeave]);
+  const handleCandlePointerMove = useCallback(
+    (position) => {
+      setCursor(position);
+      consumerOnCandlePointerMove?.(position);
+    },
+    [consumerOnCandlePointerMove]
+  );
+  const style = {
+    ...consumerStyle,
+    "--candle-scale": String(viewport.scale)
+  };
+  const chartProps = {
+    ...consumerProps,
+    data,
+    activeCandleIndex: cursor?.index,
+    cursorY: cursor?.offsetY,
+    interactive: true,
+    onCandleClick: handleCandleClick,
+    onCandlePointerLeave: handleCandlePointerLeave,
+    onCandlePointerMove: handleCandlePointerMove,
+    ref: chartRef,
+    selectedCandleIndex,
+    style
+  };
+  return /* @__PURE__ */ jsx(CandleChart, { ...chartProps });
+}
+CandleChartClient.displayName = "CandleChartClient";
+export {
+  CandleChartClient
+};
+//# sourceMappingURL=CandleChartClient.js.map

package/dist/components/candle-chart/client/CandleChartClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/candle-chart/client/CandleChartClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement, Ref } from \"react\";\nimport { CandleChart } from \"../CandleChart.js\";\nimport type { CandleChartPointerPosition, CandleChartProps } from \"../types.js\";\nimport { useChartViewport } from \"../../../hooks/use-chart-viewport.js\";\nimport { useMergedRefs } from \"../../../hooks/use-merged-refs.js\";\n\ninterface InteractiveCandleStyle extends CSSProperties {\n  \"--candle-scale\": string;\n}\n\ninterface CursorState extends CandleChartPointerPosition {}\n\n/**\n * `.candle-chart__plot`'s fixed price-axis column (4.5rem) plus its grid gap\n * (0.75rem) — see candle-chart.css. `useChartViewport` measures the whole\n * `<figure>`, but candles only ever get the width left over after this\n * column, so it must be subtracted before sizing `minItemWidth`.\n */\nconst Y_AXIS_COLUMN_WIDTH = 72 + 12;\n\nexport function CandleChartClient<TAs extends ElementType = \"figure\">(\n  props: CandleChartProps<TAs>,\n): ReactElement | null {\n  const {\n    data,\n    ref: consumerRef,\n    style: consumerStyle,\n    onCandleClick: consumerOnCandleClick,\n    onCandlePointerLeave: consumerOnCandlePointerLeave,\n    onCandlePointerMove: consumerOnCandlePointerMove,\n    ...consumerProps\n  } = props as CandleChartProps<\"figure\"> & {\n    ref?: Ref<HTMLElement>;\n    style?: CSSProperties;\n  };\n  const viewport = useChartViewport({\n    itemCount: data.length,\n    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,\n    minItemWidth: 24,\n  });\n  const [cursor, setCursor] = useState<CursorState | null>(null);\n  const [selectedCandleIndex, setSelectedCandleIndex] = useState<number | undefined>();\n  const chartRef = useMergedRefs<HTMLElement>(viewport.ref, consumerRef);\n  const handleCandleClick = useCallback(\n    (index: number) => {\n      setSelectedCandleIndex(index);\n      consumerOnCandleClick?.(index);\n    },\n    [consumerOnCandleClick],\n  );\n  const handleCandlePointerLeave = useCallback(() => {\n    setCursor(null);\n    consumerOnCandlePointerLeave?.();\n  }, [consumerOnCandlePointerLeave]);\n  const handleCandlePointerMove = useCallback(\n    (position: CandleChartPointerPosition) => {\n      setCursor(position);\n      consumerOnCandlePointerMove?.(position);\n    },\n    [consumerOnCandlePointerMove],\n  );\n  const style: InteractiveCandleStyle = {\n    ...consumerStyle,\n    \"--candle-scale\": String(viewport.scale),\n  };\n\n  const chartProps = {\n    ...consumerProps,\n    data,\n    activeCandleIndex: cursor?.index,\n    cursorY: cursor?.offsetY,\n    interactive: true,\n    onCandleClick: handleCandleClick,\n    onCandlePointerLeave: handleCandlePointerLeave,\n    onCandlePointerMove: handleCandlePointerMove,\n    ref: chartRef,\n    selectedCandleIndex,\n    style,\n  } as CandleChartProps<\"figure\">;\n\n  return <CandleChart {...chartProps} />;\n}\nCandleChartClient.displayName = \"CandleChartClient\";\n"],"mappings":";AAmFS;AAjFT,SAAS,aAAa,gBAAgB;AAEtC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAc9B,MAAM,sBAAsB,KAAK;AAE1B,SAAS,kBACd,OACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACP,eAAe;AAAA,IACf,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,WAAW,iBAAiB;AAAA,IAChC,WAAW,KAAK;AAAA,IAChB,qBAAqB;AAAA,IACrB,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,IAAI;AAC7D,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAA6B;AACnF,QAAM,WAAW,cAA2B,SAAS,KAAK,WAAW;AACrE,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAkB;AACjB,6BAAuB,KAAK;AAC5B,8BAAwB,KAAK;AAAA,IAC/B;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AACA,QAAM,2BAA2B,YAAY,MAAM;AACjD,cAAU,IAAI;AACd,mCAA+B;AAAA,EACjC,GAAG,CAAC,4BAA4B,CAAC;AACjC,QAAM,0BAA0B;AAAA,IAC9B,CAAC,aAAyC;AACxC,gBAAU,QAAQ;AAClB,oCAA8B,QAAQ;AAAA,IACxC;AAAA,IACA,CAAC,2BAA2B;AAAA,EAC9B;AACA,QAAM,QAAgC;AAAA,IACpC,GAAG;AAAA,IACH,kBAAkB,OAAO,SAAS,KAAK;AAAA,EACzC;AAEA,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA,mBAAmB,QAAQ;AAAA,IAC3B,SAAS,QAAQ;AAAA,IACjB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF;AAEA,SAAO,oBAAC,eAAa,GAAG,YAAY;AACtC;AACA,kBAAkB,cAAc;","names":[]}

package/dist/components/candle-chart/client/index.d.ts

@@ -0,0 +1,2 @@
+export { CandleChartClient } from "./CandleChartClient.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/candle-chart/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/candle-chart/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/candle-chart/client/index.js

@@ -0,0 +1,5 @@
+import { CandleChartClient } from "./CandleChartClient.js";
+export {
+  CandleChartClient
+};
+//# sourceMappingURL=index.js.map

package/dist/components/candle-chart/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/candle-chart/client/index.ts"],"sourcesContent":["export { CandleChartClient } from \"./CandleChartClient.js\";\n"],"mappings":"AAAA,SAAS,yBAAyB;","names":[]}

package/dist/components/candle-chart/client.d.ts

@@ -0,0 +1 @@
+export * from "./client/index.js";

package/dist/components/candle-chart/client.js

@@ -0,0 +1 @@
+export * from "./client/index.js";

package/dist/components/candle-chart/index.d.ts

@@ -0,0 +1,3 @@
+export { CandleChart } from "./CandleChart.js";
+export type { CandleChartAxisLabel, CandleChartData, CandleChartOwnProps, CandleChartPointerPosition, CandleChartProps, } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/candle-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/candle-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,GACjB,MAAM,YAAY,CAAC"}

package/dist/components/candle-chart/index.js

@@ -0,0 +1,5 @@
+import { CandleChart } from "./CandleChart.js";
+export {
+  CandleChart
+};
+//# sourceMappingURL=index.js.map

package/dist/components/candle-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/candle-chart/index.ts"],"sourcesContent":["export { CandleChart } from \"./CandleChart.js\";\nexport type {\n  CandleChartAxisLabel,\n  CandleChartData,\n  CandleChartOwnProps,\n  CandleChartPointerPosition,\n  CandleChartProps,\n} from \"./types.js\";\n"],"mappings":"AAAA,SAAS,mBAAmB;","names":[]}

package/dist/components/candle-chart/types.d.ts

@@ -0,0 +1,34 @@
+import type { ElementType, ReactNode } from "react";
+import type { RenderableProps } from "@gunkin/uiify/core/render";
+export interface CandleChartData {
+    readonly time: string | number;
+    readonly open: number;
+    readonly high: number;
+    readonly low: number;
+    readonly close: number;
+}
+export interface CandleChartAxisLabel {
+    readonly label: ReactNode;
+    /** Position on the axis as a percentage from 0 to 100. */
+    readonly position: number;
+}
+export interface CandleChartPointerPosition {
+    readonly index: number;
+    /** Pointer offset inside the candle hit area, in CSS pixels. */
+    readonly offsetY: number;
+}
+export interface CandleChartOwnProps {
+    readonly "aria-label"?: string;
+    readonly activeCandleIndex?: number;
+    readonly cursorY?: number;
+    readonly data: readonly CandleChartData[];
+    readonly interactive?: boolean;
+    readonly onCandleClick?: (index: number) => void;
+    readonly onCandlePointerLeave?: () => void;
+    readonly onCandlePointerMove?: (position: CandleChartPointerPosition) => void;
+    readonly selectedCandleIndex?: number;
+    readonly xAxis?: readonly CandleChartAxisLabel[];
+    readonly yAxis?: readonly CandleChartAxisLabel[];
+}
+export type CandleChartProps<TAs extends ElementType = "figure"> = RenderableProps<TAs, CandleChartOwnProps, Record<string, never>, HTMLElement>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/candle-chart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/candle-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,0BAA0B,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;CAClD;AAED,MAAM,MAAM,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,eAAe,CAChF,GAAG,EACH,mBAAmB,EACnB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACrB,WAAW,CACZ,CAAC"}

package/dist/components/candle-chart/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/candle-chart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/candle-chart.d.ts

@@ -0,0 +1 @@
+export * from "./candle-chart/index.js";

package/dist/components/candle-chart.js

@@ -0,0 +1 @@
+export * from "./candle-chart/index.js";

package/dist/components/carousel/Carousel.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { CarouselProps } from "./types.js";
+/** Native scrolling and fragment navigation; no client behavior required. */
+export declare function Carousel(props: CarouselProps): ReactElement | null;
+export declare namespace Carousel {
+    var displayName: string;
+}
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/components/carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,6EAA6E;AAC7E,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAElE;yBAFe,QAAQ"}

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { CarouselMarkup } from "./CarouselMarkup.js";
+function Carousel(props) {
+  return /* @__PURE__ */ jsx(CarouselMarkup, { base: props });
+}
+Carousel.displayName = "Carousel";
+export {
+  Carousel
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/components/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { CarouselMarkup } from \"./CarouselMarkup.js\";\nimport type { CarouselProps } from \"./types.js\";\n\n/** Native scrolling and fragment navigation; no client behavior required. */\nexport function Carousel(props: CarouselProps): ReactElement | null {\n  return <CarouselMarkup base={props} />;\n}\nCarousel.displayName = \"Carousel\";\n"],"mappings":"AAMS;AALT,SAAS,sBAAsB;AAIxB,SAAS,SAAS,OAA2C;AAClE,SAAO,oBAAC,kBAAe,MAAM,OAAO;AACtC;AACA,SAAS,cAAc;","names":[]}

package/dist/components/carousel/CarouselMarkup.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import type { CarouselMarkupProps } from "./types.js";
+export declare function CarouselMarkup({ base: rawBase, rootRef, presentation, }: CarouselMarkupProps): ReactElement | null;
+export declare namespace CarouselMarkup {
+    var displayName: string;
+}
+//# sourceMappingURL=CarouselMarkup.d.ts.map

package/dist/components/carousel/CarouselMarkup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselMarkup.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/CarouselMarkup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEtD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,OAAO,EACb,OAAO,EACP,YAAY,GACb,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAkJ3C;yBAtJe,cAAc"}