@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-carousel.js

@@ -0,0 +1,132 @@
+import {
+  createAccordion,
+  isItemOpen
+} from "./chunk-FD37DFCC.js";
+import {
+  cn,
+  devWarn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-carousel/dist/index.js
+import * as React from "react";
+
+// ../carousel/dist/index.js
+function createCarousel(config = {}) {
+  return createAccordion(config);
+}
+
+// ../react-carousel/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var CarouselContext = React.createContext(null);
+var Carousel = React.forwardRef(
+  function Carousel2({ className, type = "single", collapsible, value: controlledValue, defaultValue, onValueChange, ...props }, ref) {
+    const apiRef = React.useRef(null);
+    if (apiRef.current === null) {
+      apiRef.current = createCarousel({ type, collapsible, defaultValue, value: controlledValue, onValueChange });
+    }
+    const api = apiRef.current;
+    const state = React.useSyncExternalStore(api.subscribe, api.getState, api.getState);
+    React.useEffect(() => {
+      api.setOptions({ type, collapsible, onValueChange });
+    });
+    React.useEffect(() => {
+      if (controlledValue !== void 0) api.setValue(controlledValue);
+    }, [api, controlledValue]);
+    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: { state, toggleItem: api.toggleItem }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col w-full", className), ...props }) });
+  }
+);
+var CarouselItemContext = React.createContext(null);
+var CarouselItem = React.forwardRef(
+  function CarouselItem2({ className, value, ...props }, ref) {
+    const context = React.useContext(CarouselContext);
+    if (!context) {
+      devWarn(
+        "react-carousel/carousel-item-outside-carousel",
+        "CarouselItem was rendered outside of <Carousel>. Wrap it in <Carousel>."
+      );
+      throw new Error("CarouselItem must be within Carousel");
+    }
+    const isOpen = isItemOpen(context.state, value);
+    return /* @__PURE__ */ jsx(CarouselItemContext.Provider, { value: { value, isOpen }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("border-b border-border", className), "data-state": isOpen ? "open" : "closed", ...props }) });
+  }
+);
+var CarouselTrigger = React.forwardRef(
+  function CarouselTrigger2({ className, children, ...props }, ref) {
+    const carouselContext = React.useContext(CarouselContext);
+    const itemContext = React.useContext(CarouselItemContext);
+    if (!carouselContext || !itemContext) {
+      devWarn(
+        "react-carousel/carousel-trigger-outside-item",
+        "CarouselTrigger was rendered outside of a <CarouselItem> within <Carousel>. Nest it inside <CarouselItem>."
+      );
+      throw new Error("CarouselTrigger missing context");
+    }
+    return /* @__PURE__ */ jsx("h3", { className: "flex m-0 p-0", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": itemContext.isOpen,
+        className: cn(
+          "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+          className
+        ),
+        "data-state": itemContext.isOpen ? "open" : "closed",
+        onClick: () => carouselContext.toggleItem(itemContext.value),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+              children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var CarouselContent = React.forwardRef(
+  function CarouselContent2({ className, children, ...props }, ref) {
+    const itemContext = React.useContext(CarouselItemContext);
+    if (!itemContext) {
+      devWarn(
+        "react-carousel/carousel-content-outside-item",
+        "CarouselContent was rendered outside of a <CarouselItem> within <Carousel>. Nest it inside <CarouselItem>."
+      );
+      throw new Error("CarouselContent missing context");
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-hidden text-sm",
+          className
+        ),
+        "data-state": itemContext.isOpen ? "open" : "closed",
+        hidden: !itemContext.isOpen,
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "pb-4 pt-0 text-muted-foreground leading-relaxed", children })
+      }
+    );
+  }
+);
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselTrigger
+};
+//# sourceMappingURL=react-carousel.js.map

package/dist/react-carousel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../carousel/src/carousel.ts", "../../react-carousel/src/carousel.tsx"],
+  "sourcesContent": ["/**\n * @refraction-ui/carousel — headless \"carousel\" store.\n *\n * Honest note: despite the name, this component is an expand/collapse panel\n * set (an accordion in disguise) — that is the behavior the React adapter and\n * the docs site demo (single/multiple open panels, collapsible toggles). The\n * state machine is therefore shared with `@refraction-ui/accordion` rather\n * than duplicated. A real slide-navigation carousel (active index, next/prev)\n * would be a different core; this package keeps the shipped behavior.\n */\nimport {\n  createAccordion,\n  isItemOpen,\n  type AccordionAPI,\n  type AccordionConfig,\n  type AccordionState,\n  type AccordionType,\n  type AccordionValue,\n} from '@refraction-ui/accordion'\n\n/** Expansion mode: one item open at a time, or any number. */\nexport type CarouselType = AccordionType\n\n/** Open item id (`single`) or ids (`multiple`). */\nexport type CarouselValue = AccordionValue\n\n/** Options for {@link createCarousel}. Mirrors {@link AccordionConfig}. */\nexport interface CarouselConfig extends AccordionConfig {}\n\n/** Snapshot of the store. Returned by `getState()`; treat as immutable. */\nexport interface CarouselState extends AccordionState {}\n\n/** The framework-agnostic store. React/Astro adapters wrap this. */\nexport type CarouselAPI = AccordionAPI\n\n/**\n * createCarousel — headless expand/collapse panel store. This is the\n * accordion state machine under the carousel name; see the package note.\n */\nexport function createCarousel(config: CarouselConfig = {}): CarouselAPI {\n  return createAccordion(config)\n}\n\n/** Pure open-state check shared by every adapter. */\nexport { isItemOpen }\n", "import * as React from 'react'\nimport { cn, devWarn } from '@refraction-ui/shared'\nimport {\n  createCarousel,\n  isItemOpen,\n  type CarouselAPI,\n  type CarouselState,\n} from '@refraction-ui/carousel'\n\nconst CarouselContext = React.createContext<{\n  state: CarouselState\n  toggleItem: CarouselAPI['toggleItem']\n} | null>(null)\n\nexport interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  type?: 'single' | 'multiple'\n  collapsible?: boolean\n  defaultValue?: string | string[]\n  value?: string | string[]\n  onValueChange?: (value: string | string[]) => void\n}\n\nexport const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel({ className, type = 'single', collapsible, value: controlledValue, defaultValue, onValueChange, ...props }, ref) {\n    // The headless core owns the open/closed state machine; it is created once\n    // and props are synced into it below.\n    const apiRef = React.useRef<CarouselAPI | null>(null)\n    if (apiRef.current === null) {\n      apiRef.current = createCarousel({ type, collapsible, defaultValue, value: controlledValue, onValueChange })\n    }\n    const api = apiRef.current\n\n    const state = React.useSyncExternalStore(api.subscribe, api.getState, api.getState)\n\n    React.useEffect(() => {\n      api.setOptions({ type, collapsible, onValueChange })\n    })\n    React.useEffect(() => {\n      if (controlledValue !== undefined) api.setValue(controlledValue)\n    }, [api, controlledValue])\n\n    return (\n      <CarouselContext.Provider value={{ state, toggleItem: api.toggleItem }}>\n        <div ref={ref} className={cn(\"flex flex-col w-full\", className)} {...props} />\n      </CarouselContext.Provider>\n    )\n  }\n)\n\nconst CarouselItemContext = React.createContext<{ value: string; isOpen: boolean } | null>(null)\n\nexport interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string\n}\n\nexport const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(\n  function CarouselItem({ className, value, ...props }, ref) {\n    const context = React.useContext(CarouselContext)\n    if (!context) {\n      devWarn(\n        'react-carousel/carousel-item-outside-carousel',\n        'CarouselItem was rendered outside of <Carousel>. Wrap it in <Carousel>.',\n      )\n      throw new Error('CarouselItem must be within Carousel')\n    }\n\n    const isOpen = isItemOpen(context.state, value)\n\n    return (\n      <CarouselItemContext.Provider value={{ value, isOpen }}>\n        <div ref={ref} className={cn(\"border-b border-border\", className)} data-state={isOpen ? 'open' : 'closed'} {...props} />\n      </CarouselItemContext.Provider>\n    )\n  }\n)\n\nexport interface CarouselTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const CarouselTrigger = React.forwardRef<HTMLButtonElement, CarouselTriggerProps>(\n  function CarouselTrigger({ className, children, ...props }, ref) {\n    const carouselContext = React.useContext(CarouselContext)\n    const itemContext = React.useContext(CarouselItemContext)\n\n    if (!carouselContext || !itemContext) {\n      devWarn(\n        'react-carousel/carousel-trigger-outside-item',\n        'CarouselTrigger was rendered outside of a <CarouselItem> within <Carousel>. Nest it inside <CarouselItem>.',\n      )\n      throw new Error('CarouselTrigger missing context')\n    }\n\n    return (\n      <h3 className=\"flex m-0 p-0\">\n        <button\n          ref={ref}\n          type=\"button\"\n          aria-expanded={itemContext.isOpen}\n          className={cn(\n            \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n            className\n          )}\n          data-state={itemContext.isOpen ? 'open' : 'closed'}\n          onClick={() => carouselContext.toggleItem(itemContext.value)}\n          {...props}\n        >\n          {children}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n          >\n            <path d=\"m6 9 6 6 6-6\"/>\n          </svg>\n        </button>\n      </h3>\n    )\n  }\n)\n\nexport interface CarouselContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(\n  function CarouselContent({ className, children, ...props }, ref) {\n    const itemContext = React.useContext(CarouselItemContext)\n    if (!itemContext) {\n      devWarn(\n        'react-carousel/carousel-content-outside-item',\n        'CarouselContent was rendered outside of a <CarouselItem> within <Carousel>. Nest it inside <CarouselItem>.',\n      )\n      throw new Error('CarouselContent missing context')\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"overflow-hidden text-sm\",\n          className\n        )}\n        data-state={itemContext.isOpen ? 'open' : 'closed'}\n        hidden={!itemContext.isOpen}\n        {...props}\n      >\n        <div className=\"pb-4 pt-0 text-muted-foreground leading-relaxed\">{children}</div>\n      </div>\n    )\n  }\n)\n"],
+  "mappings": "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",
+  "names": ["Carousel", "CarouselItem", "CarouselTrigger", "CarouselContent"]
+}

package/dist/react-charts.js

@@ -0,0 +1,509 @@
+import {
+  devWarn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../charts/dist/index.js
+function createLinearScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const domainSpan = d1 - d0;
+  const rangeSpan = r1 - r0;
+  const scale = ((value) => {
+    if (domainSpan === 0) return r0;
+    return r0 + (value - d0) / domainSpan * rangeSpan;
+  });
+  scale.invert = (value) => {
+    if (rangeSpan === 0) return d0;
+    return d0 + (value - r0) / rangeSpan * domainSpan;
+  };
+  scale.ticks = (count = 10) => {
+    if (count <= 0) return [];
+    const ticks = [];
+    for (let i = 0; i < count; i++) {
+      ticks.push(d0 + domainSpan * i / (count - 1 || 1));
+    }
+    return ticks;
+  };
+  scale.type = "linear";
+  scale.domain = domain;
+  scale.range = range;
+  return scale;
+}
+function createBandScale(domain, range, padding = 0) {
+  const [r0, r1] = range;
+  const rangeSpan = r1 - r0;
+  const n = domain.length;
+  let step = 0;
+  let bw = 0;
+  if (n > 0) {
+    if (n === 1) {
+      bw = rangeSpan;
+      step = rangeSpan;
+    } else {
+      step = n > 0 ? rangeSpan / (n - padding) : 0;
+      bw = step * (1 - padding);
+    }
+  }
+  const indexMap = /* @__PURE__ */ new Map();
+  domain.forEach((d, i) => indexMap.set(d, i));
+  const scale = ((value) => {
+    const idx = indexMap.get(value);
+    if (idx === void 0) return 0;
+    return r0 + idx * step;
+  });
+  scale.bandwidth = () => {
+    return Math.max(0, bw);
+  };
+  scale.type = "band";
+  scale.domain = domain;
+  scale.range = range;
+  return scale;
+}
+function computeExtent(data) {
+  let min = data[0];
+  let max = data[0];
+  for (let i = 1; i < data.length; i++) {
+    if (data[i] < min) min = data[i];
+    if (data[i] > max) max = data[i];
+  }
+  return [min, max];
+}
+function computeHistogramBins(data, binCount) {
+  const count = binCount ?? Math.ceil(Math.sqrt(data.length));
+  const [min, max] = computeExtent(data);
+  const span = max - min;
+  if (span === 0) {
+    const bins2 = [];
+    for (let i = 0; i < count; i++) {
+      bins2.push({ x0: min, x1: max, count: 0 });
+    }
+    bins2[0].count = data.length;
+    return bins2;
+  }
+  const binWidth = span / count;
+  const bins = [];
+  for (let i = 0; i < count; i++) {
+    bins.push({
+      x0: min + i * binWidth,
+      x1: min + (i + 1) * binWidth,
+      count: 0
+    });
+  }
+  for (const value of data) {
+    let idx = Math.floor((value - min) / binWidth);
+    if (idx >= count) idx = count - 1;
+    bins[idx].count++;
+  }
+  return bins;
+}
+function linePath(points) {
+  if (points.length === 0) return "";
+  let d = `M${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length; i++) {
+    d += `L${points[i].x},${points[i].y}`;
+  }
+  return d;
+}
+function arcPath(cx, cy, radius, startAngle, endAngle) {
+  const x1 = cx + radius * Math.cos(startAngle);
+  const y1 = cy + radius * Math.sin(startAngle);
+  const x2 = cx + radius * Math.cos(endAngle);
+  const y2 = cy + radius * Math.sin(endAngle);
+  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+  const r = (n) => Math.round(n * 1e6) / 1e6;
+  let d = `M${r(x1)},${r(y1)}`;
+  d += `A${radius},${radius} 0 ${largeArcFlag} 1 ${r(x2)},${r(y2)}`;
+  d += `L${cx},${cy}`;
+  d += "Z";
+  return d;
+}
+var DEFAULT_MARGIN = {
+  top: 40,
+  right: 30,
+  bottom: 40,
+  left: 75
+};
+var DEFAULT_WIDTH = 600;
+var DEFAULT_HEIGHT = 400;
+function combineDimensions(partial) {
+  const width = partial.width ?? DEFAULT_WIDTH;
+  const height = partial.height ?? DEFAULT_HEIGHT;
+  const margin = {
+    ...DEFAULT_MARGIN,
+    ...partial.margin ?? {}
+  };
+  const boundedWidth = Math.max(0, width - margin.left - margin.right);
+  const boundedHeight = Math.max(0, height - margin.top - margin.bottom);
+  return { width, height, margin, boundedWidth, boundedHeight };
+}
+function formatTick(value, type) {
+  if (type === "string") {
+    return String(value);
+  }
+  if (type === "date") {
+    if (value instanceof Date) {
+      return value.toISOString().split("T")[0];
+    }
+    return String(value);
+  }
+  const num = value;
+  if (!Number.isFinite(num)) return String(num);
+  if (Number.isInteger(num)) {
+    return num.toLocaleString("en-US", { maximumFractionDigits: 0 });
+  }
+  const formatted = num.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+  return formatted;
+}
+
+// ../react-charts/dist/index.js
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_MARGIN2 = { top: 40, right: 30, bottom: 40, left: 75 };
+var ChartContext = createContext({
+  __isDefault: true,
+  dimensions: {
+    width: 600,
+    height: 400,
+    margin: DEFAULT_MARGIN2,
+    boundedWidth: 600 - DEFAULT_MARGIN2.left - DEFAULT_MARGIN2.right,
+    boundedHeight: 400 - DEFAULT_MARGIN2.top - DEFAULT_MARGIN2.bottom
+  }
+});
+function useChartContext() {
+  const ctx = useContext(ChartContext);
+  if (ctx.__isDefault) {
+    devWarn(
+      "react-charts/no-chart-provider",
+      "A chart sub-component (Bars/Line/Circles/\u2026) was rendered without a <Chart> ancestor. It is silently falling back to default 600x400 dimensions and will render with the wrong scale. Wrap it in <Chart>\u2026</Chart>."
+    );
+  }
+  return ctx;
+}
+function Chart({
+  width = 600,
+  height = 400,
+  margin,
+  children,
+  className
+}) {
+  const dimensions = combineDimensions({ width, height, margin });
+  return /* @__PURE__ */ jsx("svg", { width, height, className, children: /* @__PURE__ */ jsx(ChartContext.Provider, { value: { dimensions }, children: /* @__PURE__ */ jsx("g", { transform: `translate(${dimensions.margin.left},${dimensions.margin.top})`, children }) }) });
+}
+function Bars({ data, x, y, fill = "currentColor", className }) {
+  const { dimensions } = useChartContext();
+  const { boundedWidth, boundedHeight } = dimensions;
+  const labels = data.map(x);
+  const values = data.map(y);
+  const [, maxVal] = computeExtent(values);
+  const xScale = createBandScale(labels, [0, boundedWidth], 0.1);
+  const yScale = createLinearScale([0, maxVal], [boundedHeight, 0]);
+  return /* @__PURE__ */ jsx("g", { className, children: data.map((d, i) => {
+    const label = labels[i];
+    const value = values[i];
+    const barX = xScale(label);
+    const barY = yScale(value);
+    const barHeight = boundedHeight - barY;
+    const barWidth = xScale.bandwidth();
+    return /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: barX,
+        y: barY,
+        width: barWidth,
+        height: barHeight,
+        fill
+      },
+      i
+    );
+  }) });
+}
+function Line({
+  data,
+  x,
+  y,
+  stroke = "currentColor",
+  strokeWidth = 2,
+  fill = "none",
+  className
+}) {
+  const { dimensions } = useChartContext();
+  const { boundedWidth, boundedHeight } = dimensions;
+  const xValues = data.map(x);
+  const yValues = data.map(y);
+  const [xMin, xMax] = computeExtent(xValues);
+  const [yMin, yMax] = computeExtent(yValues);
+  const xScale = createLinearScale([xMin, xMax], [0, boundedWidth]);
+  const yScale = createLinearScale([yMin, yMax], [boundedHeight, 0]);
+  const points = data.map((d2) => ({
+    x: xScale(x(d2)),
+    y: yScale(y(d2))
+  }));
+  const d = linePath(points);
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      className,
+      d,
+      stroke,
+      strokeWidth,
+      fill
+    }
+  );
+}
+function Circles({
+  data,
+  cx,
+  cy,
+  r = 4,
+  fill = "currentColor",
+  className
+}) {
+  const { dimensions } = useChartContext();
+  const { boundedWidth, boundedHeight } = dimensions;
+  const xValues = data.map(cx);
+  const yValues = data.map(cy);
+  const [xMin, xMax] = computeExtent(xValues);
+  const [yMin, yMax] = computeExtent(yValues);
+  const xScale = createLinearScale([xMin, xMax], [0, boundedWidth]);
+  const yScale = createLinearScale([yMin, yMax], [boundedHeight, 0]);
+  return /* @__PURE__ */ jsx("g", { className, children: data.map((d, i) => /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: xScale(cx(d)),
+      cy: yScale(cy(d)),
+      r,
+      fill
+    },
+    i
+  )) });
+}
+function XAxis({
+  ticks,
+  scale,
+  height,
+  tickSize = 6,
+  className
+}) {
+  return /* @__PURE__ */ jsx("g", { className, transform: `translate(0,${height})`, children: ticks.map((tick, i) => {
+    const x = scale(tick);
+    return /* @__PURE__ */ jsxs("g", { transform: `translate(${x},0)`, children: [
+      /* @__PURE__ */ jsx("line", { y2: tickSize, stroke: "currentColor" }),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          y: tickSize + 9,
+          textAnchor: "middle",
+          fontSize: 12,
+          fill: "currentColor",
+          children: String(tick)
+        }
+      )
+    ] }, i);
+  }) });
+}
+function YAxis({
+  ticks,
+  scale,
+  tickSize = 6,
+  className
+}) {
+  return /* @__PURE__ */ jsx("g", { className, children: ticks.map((tick, i) => {
+    const y = scale(tick);
+    return /* @__PURE__ */ jsxs("g", { transform: `translate(0,${y})`, children: [
+      /* @__PURE__ */ jsx("line", { x2: -tickSize, stroke: "currentColor" }),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: -tickSize - 4,
+          dy: "0.32em",
+          textAnchor: "end",
+          fontSize: 12,
+          fill: "currentColor",
+          children: String(tick)
+        }
+      )
+    ] }, i);
+  }) });
+}
+function Gradient({
+  id,
+  from,
+  to,
+  direction = "vertical",
+  className
+}) {
+  const isVertical = direction === "vertical";
+  return /* @__PURE__ */ jsx("defs", { className, children: /* @__PURE__ */ jsxs(
+    "linearGradient",
+    {
+      id,
+      x1: "0",
+      y1: "0",
+      x2: isVertical ? "0" : "1",
+      y2: isVertical ? "1" : "0",
+      children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: from }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: to })
+      ]
+    }
+  ) });
+}
+function Histogram({
+  data,
+  width = 600,
+  height = 400,
+  bins: binCount = 10,
+  fill = "steelblue",
+  margin,
+  className
+}) {
+  const dimensions = combineDimensions({ width, height, margin });
+  const { boundedWidth, boundedHeight } = dimensions;
+  const histBins = computeHistogramBins(data, binCount);
+  const maxCount = Math.max(...histBins.map((b) => b.count));
+  const labels = histBins.map((b) => `${formatTick(b.x0, "number")}-${formatTick(b.x1, "number")}`);
+  const xScale = createBandScale(labels, [0, boundedWidth], 0.05);
+  const yScale = createLinearScale([0, maxCount], [boundedHeight, 0]);
+  const yTicks = yScale.ticks(5);
+  return /* @__PURE__ */ jsx("svg", { width, height, className, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${dimensions.margin.left},${dimensions.margin.top})`, children: [
+    histBins.map((bin, i) => {
+      const label = labels[i];
+      const barX = xScale(label);
+      const barY = yScale(bin.count);
+      const barHeight = boundedHeight - barY;
+      const barWidth = xScale.bandwidth();
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: barX,
+          y: barY,
+          width: barWidth,
+          height: barHeight,
+          fill
+        },
+        i
+      );
+    }),
+    /* @__PURE__ */ jsx("g", { transform: `translate(0,${boundedHeight})`, children: labels.map((label, i) => {
+      const x = xScale(label) + xScale.bandwidth() / 2;
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${x},0)`, children: [
+        /* @__PURE__ */ jsx("line", { y2: 6, stroke: "currentColor" }),
+        /* @__PURE__ */ jsx("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "currentColor", children: label })
+      ] }, i);
+    }) }),
+    /* @__PURE__ */ jsx("g", { children: yTicks.map((tick, i) => {
+      const y = yScale(tick);
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(0,${y})`, children: [
+        /* @__PURE__ */ jsx("line", { x2: -6, stroke: "currentColor" }),
+        /* @__PURE__ */ jsx("text", { x: -9, dy: "0.32em", textAnchor: "end", fontSize: 10, fill: "currentColor", children: formatTick(tick, "number") })
+      ] }, i);
+    }) })
+  ] }) });
+}
+function ScatterPlot({
+  data,
+  x,
+  y,
+  width = 600,
+  height = 400,
+  r = 4,
+  fill = "steelblue",
+  margin,
+  className
+}) {
+  const dimensions = combineDimensions({ width, height, margin });
+  const { boundedWidth, boundedHeight } = dimensions;
+  const xValues = data.map(x);
+  const yValues = data.map(y);
+  const [xMin, xMax] = computeExtent(xValues);
+  const [yMin, yMax] = computeExtent(yValues);
+  const xScale = createLinearScale([xMin, xMax], [0, boundedWidth]);
+  const yScale = createLinearScale([yMin, yMax], [boundedHeight, 0]);
+  const xTicks = xScale.ticks(5);
+  const yTicks = yScale.ticks(5);
+  return /* @__PURE__ */ jsx("svg", { width, height, className, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${dimensions.margin.left},${dimensions.margin.top})`, children: [
+    data.map((d, i) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: xScale(x(d)),
+        cy: yScale(y(d)),
+        r,
+        fill
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx("g", { transform: `translate(0,${boundedHeight})`, children: xTicks.map((tick, i) => {
+      const px = xScale(tick);
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${px},0)`, children: [
+        /* @__PURE__ */ jsx("line", { y2: 6, stroke: "currentColor" }),
+        /* @__PURE__ */ jsx("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "currentColor", children: formatTick(tick, "number") })
+      ] }, i);
+    }) }),
+    /* @__PURE__ */ jsx("g", { children: yTicks.map((tick, i) => {
+      const py = yScale(tick);
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(0,${py})`, children: [
+        /* @__PURE__ */ jsx("line", { x2: -6, stroke: "currentColor" }),
+        /* @__PURE__ */ jsx("text", { x: -9, dy: "0.32em", textAnchor: "end", fontSize: 10, fill: "currentColor", children: formatTick(tick, "number") })
+      ] }, i);
+    }) })
+  ] }) });
+}
+var DEFAULT_COLORS = [
+  "#4e79a7",
+  "#f28e2b",
+  "#e15759",
+  "#76b7b2",
+  "#59a14f",
+  "#edc948",
+  "#b07aa1",
+  "#ff9da7",
+  "#9c755f",
+  "#bab0ac"
+];
+function PieChart({
+  data,
+  value,
+  width = 300,
+  height = 300,
+  colors = DEFAULT_COLORS,
+  className
+}) {
+  const cx = width / 2;
+  const cy = height / 2;
+  const radius = Math.min(cx, cy) - 10;
+  const values = data.map(value);
+  const total = values.reduce((sum, v) => sum + v, 0);
+  let currentAngle = -Math.PI / 2;
+  const arcs = data.map((_, i) => {
+    const sliceAngle = values[i] / total * Math.PI * 2;
+    const startAngle = currentAngle;
+    const endAngle = currentAngle + sliceAngle;
+    currentAngle = endAngle;
+    return { startAngle, endAngle, color: colors[i % colors.length] };
+  });
+  return /* @__PURE__ */ jsx("svg", { width, height, className, children: arcs.map((arc, i) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: arcPath(cx, cy, radius, arc.startAngle, arc.endAngle),
+      fill: arc.color
+    },
+    i
+  )) });
+}
+export {
+  Bars,
+  Chart,
+  ChartContext,
+  Circles,
+  Gradient,
+  Histogram,
+  Line,
+  PieChart,
+  ScatterPlot,
+  XAxis,
+  YAxis
+};
+//# sourceMappingURL=react-charts.js.map