@chakra-ui/charts 3.15.0

package/dist/esm/bar-segment/bar-segment.js

@@ -0,0 +1,187 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Stack, HStack, Box, Flex, Span, FormatNumber, ColorSwatch, Text } from '@chakra-ui/react';
+import * as React from 'react';
+
+const ChartContext = React.createContext({});
+function BarSegmentRoot(props) {
+  const { chart, barSize = "10", children, ...rest } = props;
+  return /* @__PURE__ */ jsx(Stack, { gap: "4", ...rest, css: { "--bar-size": chart.size(barSize) }, children: /* @__PURE__ */ jsx(ChartContext.Provider, { value: chart, children }) });
+}
+const BarSegmentContent = React.forwardRef(
+  function BarSegmentContent2(props, ref) {
+    const chart = React.useContext(ChartContext);
+    return /* @__PURE__ */ jsx(
+      Stack,
+      {
+        w: "full",
+        gap: "1",
+        ref,
+        onMouseLeave: () => chart.setHighlightedSeries(null),
+        ...props
+      }
+    );
+  }
+);
+function BarSegmentLabel(props) {
+  const chart = React.useContext(ChartContext);
+  const getPercent = (value) => chart.getValuePercent("value", value);
+  return /* @__PURE__ */ jsx(HStack, { ...props, children: chart.data.map((item) => /* @__PURE__ */ jsx(
+    HStack,
+    {
+      flexShrink: "0",
+      textStyle: "sm",
+      fontWeight: "medium",
+      lineClamp: 1,
+      style: {
+        ["--bar-percent"]: `${getPercent(item.value)}%`
+      },
+      flex: "var(--bar-percent)",
+      children: item.name
+    },
+    item.name
+  )) });
+}
+function BarSegmentBar(props) {
+  const { showTooltip, children, ...rest } = props;
+  const chart = React.useContext(ChartContext);
+  const getPercent = (value) => chart.getValuePercent("value", value);
+  return /* @__PURE__ */ jsxs(HStack, { pos: "relative", gap: "1", ...rest, children: [
+    chart.data.map((item) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        pos: "relative",
+        flexShrink: "0",
+        flex: "var(--bar-percent)",
+        height: "var(--bar-size)",
+        bg: item.color,
+        rounded: "l1",
+        onMouseMove: () => {
+          if (!showTooltip) return;
+          chart.setHighlightedSeries(item.name);
+        },
+        style: {
+          ["--bar-percent"]: `${getPercent(item.value)}%`
+        },
+        children: showTooltip && /* @__PURE__ */ jsx(BarSegmentTooltip, { payload: item })
+      },
+      item.name
+    )),
+    children
+  ] });
+}
+function BarSegmentReference(props) {
+  const { value, label } = props;
+  const chart = React.useContext(ChartContext);
+  const getPercent = (value2) => chart.getValuePercent("value", value2);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      h: label ? "150%" : "100%",
+      pos: "absolute",
+      insetStart: `var(--bar-percent)`,
+      bottom: "0",
+      style: { ["--bar-percent"]: `${getPercent(value)}%` },
+      children: /* @__PURE__ */ jsxs(Flex, { gap: "2", h: "full", children: [
+        /* @__PURE__ */ jsx(
+          Span,
+          {
+            w: "2px",
+            h: "100%",
+            bg: "bg.inverted",
+            outline: "2px solid {colors.bg}"
+          }
+        ),
+        label && /* @__PURE__ */ jsx(Span, { fontWeight: "medium", textStyle: "xs", pos: "relative", top: "-4px", children: label })
+      ] })
+    }
+  );
+}
+function BarSegmentValue(props) {
+  const chart = React.useContext(ChartContext);
+  const getPercent = (value) => chart.getValuePercent("value", value);
+  return /* @__PURE__ */ jsx(HStack, { ...props, children: chart.data.map((item) => /* @__PURE__ */ jsx(
+    HStack,
+    {
+      textStyle: "sm",
+      fontWeight: "medium",
+      flexShrink: "0",
+      style: {
+        ["--bar-percent"]: `${getPercent(item.value)}%`
+      },
+      flex: "var(--bar-percent)",
+      children: /* @__PURE__ */ jsx(
+        FormatNumber,
+        {
+          value: item.value,
+          notation: "compact",
+          maximumFractionDigits: 2
+        }
+      )
+    },
+    item.name
+  )) });
+}
+function BarSegmentLegend(props) {
+  const { showPercent, showValue, valueFormatter, ...rest } = props;
+  const chart = React.useContext(ChartContext);
+  const formatter = valueFormatter || chart.formatNumber({ maximumFractionDigits: 2 });
+  return /* @__PURE__ */ jsx(HStack, { wrap: "wrap", gap: "4", textStyle: "sm", ...rest, children: chart.data.map((item) => /* @__PURE__ */ jsxs(HStack, { children: [
+    /* @__PURE__ */ jsx(
+      ColorSwatch,
+      {
+        value: chart.color(item.color),
+        boxSize: "0.82em",
+        rounded: "full"
+      }
+    ),
+    /* @__PURE__ */ jsxs(HStack, { gap: "1.5", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.name }),
+      showValue && /* @__PURE__ */ jsx(Span, { fontWeight: "medium", children: formatter(item.value) }),
+      showPercent && /* @__PURE__ */ jsxs(Span, { color: "fg.muted", children: [
+        chart.getValuePercent("value", item.value).toFixed(0),
+        "%"
+      ] })
+    ] })
+  ] }, item.name)) });
+}
+function BarSegmentTooltip(props) {
+  const { payload } = props;
+  const chart = React.useContext(ChartContext);
+  if (!payload || chart.highlightedSeries !== payload.name) return null;
+  const item = chart.data.find((d) => d.name === payload.name);
+  if (!item) return null;
+  const formatter = chart.formatNumber({ maximumFractionDigits: 2 });
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      pos: "absolute",
+      top: "-4",
+      right: "4",
+      bg: "bg.panel",
+      textStyle: "xs",
+      zIndex: "1",
+      px: "2.5",
+      py: "1",
+      gap: "1.5",
+      rounded: "l2",
+      shadow: "md",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            value: chart.color(item.color),
+            boxSize: "0.82em",
+            rounded: "full"
+          }
+        ),
+        /* @__PURE__ */ jsx(Span, { children: item.name }),
+        /* @__PURE__ */ jsx(Span, { fontFamily: "mono", fontWeight: "medium", children: formatter(item.value) })
+      ]
+    }
+  );
+}
+
+export { BarSegmentBar, BarSegmentContent, BarSegmentLabel, BarSegmentLegend, BarSegmentReference, BarSegmentRoot, BarSegmentTooltip, BarSegmentValue };

package/dist/esm/bar-segment/index.js

@@ -0,0 +1,4 @@
+"use strict";
+export { BarSegmentBar, BarSegmentContent, BarSegmentLabel, BarSegmentLegend, BarSegmentReference, BarSegmentRoot, BarSegmentValue } from './bar-segment.js';
+import * as namespace from './namespace.js';
+export { namespace as BarSegment };

package/dist/esm/bar-segment/namespace.js

@@ -0,0 +1,2 @@
+"use strict";
+export { BarSegmentBar as Bar, BarSegmentContent as Content, BarSegmentLabel as Label, BarSegmentLegend as Legend, BarSegmentReference as Reference, BarSegmentRoot as Root, BarSegmentValue as Value } from './bar-segment.js';

package/dist/esm/chart/chart.js

@@ -0,0 +1,251 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { defineStyle, Box, Stack, Text, Flex, HStack, ColorSwatch, Span, Separator } from '@chakra-ui/react';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ResponsiveContainer } from 'recharts';
+import { getProp } from '../use-chart.js';
+
+const ChartContext = React.createContext({});
+const useChartContext = () => React.useContext(ChartContext);
+const baseCss = defineStyle({
+  width: "100%",
+  [`& :where(${[
+    ".recharts-cartesian-axis-tick-value",
+    ".recharts-polar-angle-axis-tick-value",
+    ".recharts-polar-radius-axis-tick-value",
+    ".recharts-pie-label-text"
+  ].join(", ")})`]: {
+    fill: "fg.muted"
+  },
+  "& .recharts-cartesian-axis .recharts-label": {
+    fill: "fg",
+    fontWeight: "medium"
+  },
+  "& *": {
+    outline: "none"
+  },
+  "& svg": {
+    overflow: "visible"
+  }
+});
+const ChartRoot = React.forwardRef(
+  function ChartRoot2(props, ref) {
+    const { children, css, chart, ...rest } = props;
+    return /* @__PURE__ */ jsx(ChartContext.Provider, { value: chart, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        aspectRatio: "landscape",
+        textStyle: "xs",
+        css: [baseCss, css],
+        ...rest,
+        children: /* @__PURE__ */ jsx(ResponsiveContainer, { children })
+      }
+    ) });
+  }
+);
+const ChartGradient = React.forwardRef(function ChartGradient2(props, ref) {
+  const chart = useChartContext();
+  const { id, fillOpacity, stops } = props;
+  return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", ref, children: stops.map((stop, index) => /* @__PURE__ */ jsx(
+    "stop",
+    {
+      offset: stop.offset,
+      stopColor: chart.color(stop.color),
+      stopOpacity: stop.opacity ?? fillOpacity
+    },
+    index
+  )) });
+});
+const hAlignMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+function ChartLegend(props) {
+  const {
+    payload,
+    verticalAlign = "bottom",
+    align = "center",
+    title,
+    orientation,
+    nameKey,
+    spacing = "2.5"
+  } = props;
+  const chart = useChartContext();
+  const filteredPayload = payload?.filter(
+    (item) => item.color !== "none" || item.type !== "none"
+  );
+  if (!filteredPayload?.length) return null;
+  const spacingValue = typeof spacing === "number" ? `${spacing}px` : chart.spacing(spacing);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: "1.5",
+      align: hAlignMap[align],
+      pt: verticalAlign === "bottom" ? "3" : void 0,
+      pb: verticalAlign === "top" ? "3" : void 0,
+      children: [
+        title && /* @__PURE__ */ jsx(Text, { fontWeight: "medium", children: title }),
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            "data-orientation": orientation,
+            gap: spacingValue,
+            direction: { _horizontal: "row", _vertical: "column" },
+            align: { _horizontal: "center", _vertical: "flex-start" },
+            flexWrap: "wrap",
+            children: filteredPayload.map((item, index) => {
+              const config = chart.getSeries(item);
+              const name = getProp(item.payload, nameKey);
+              return /* @__PURE__ */ jsxs(HStack, { gap: "1", _icon: { boxSize: "3" }, children: [
+                config?.icon || /* @__PURE__ */ jsx(
+                  ColorSwatch,
+                  {
+                    boxSize: "2.5",
+                    rounded: "full",
+                    value: chart.color(config?.color)
+                  }
+                ),
+                /* @__PURE__ */ jsx(Span, { color: "fg.muted", children: name || config?.label })
+              ] }, index);
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function ChartTooltip(props) {
+  const {
+    payload: payloadProp,
+    label,
+    labelFormatter,
+    hideLabel,
+    hideIndicator,
+    hideSeriesLabel,
+    showTotal,
+    fitContent,
+    nameKey,
+    render
+  } = props;
+  const chart = useChartContext();
+  const payload = payloadProp?.filter(
+    (item) => item.color !== "none" || item.type !== "none"
+  );
+  const total = useMemo(() => chart.getPayloadTotal(payload), [payload, chart]);
+  const tooltipLabel = React.useMemo(() => {
+    const item = payload?.[0];
+    const itemLabel = `${getProp(item?.payload, nameKey) || label || item?.dataKey || "value"}`;
+    return labelFormatter?.(itemLabel, payload ?? []) ?? itemLabel;
+  }, [payload, labelFormatter, label, nameKey]);
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      minW: fitContent ? void 0 : "8rem",
+      gap: "1",
+      rounded: "l2",
+      bg: "bg.panel",
+      px: "2.5",
+      py: "1",
+      textStyle: "xs",
+      shadow: "md",
+      children: [
+        !hideLabel && /* @__PURE__ */ jsx(Text, { fontWeight: "medium", children: tooltipLabel }),
+        /* @__PURE__ */ jsx(Box, { children: payload.map((item, index) => {
+          const config = chart.getSeries(item);
+          if (render) return render(item.payload);
+          return /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: "1.5",
+              wrap: "wrap",
+              align: "center",
+              _icon: { boxSize: "2.5" },
+              children: [
+                config?.icon,
+                config?.color && !config?.icon && !hideIndicator && /* @__PURE__ */ jsx(
+                  ColorSwatch,
+                  {
+                    rounded: "full",
+                    boxSize: "2",
+                    value: chart.color(config.color)
+                  }
+                ),
+                /* @__PURE__ */ jsxs(HStack, { justify: "space-between", flex: "1", children: [
+                  !hideSeriesLabel && /* @__PURE__ */ jsx(Span, { color: "fg.muted", children: `${config?.label || item.name}` }),
+                  item.value && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      fontFamily: "mono",
+                      fontWeight: "medium",
+                      fontVariantNumeric: "tabular-nums",
+                      children: item.value.toLocaleString()
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          );
+        }) }),
+        showTotal && total != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, { mt: "1" }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "1", justify: "space-between", pb: "1", children: [
+            /* @__PURE__ */ jsx(Span, { color: "fg.muted", children: "Total" }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fontFamily: "mono",
+                fontWeight: "medium",
+                fontVariantNumeric: "tabular-nums",
+                children: total.toLocaleString()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const isPolarViewBox = (viewBox) => "cx" in viewBox && "cy" in viewBox;
+function ChartRadialText(props) {
+  const { viewBox, title, description, gap = 24 } = props;
+  const chart = useChartContext();
+  if (!viewBox || !isPolarViewBox(viewBox)) return null;
+  return /* @__PURE__ */ jsxs(
+    "text",
+    {
+      x: viewBox.cx,
+      y: viewBox.cy,
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      fill: chart.color("fg"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "tspan",
+          {
+            x: viewBox.cx,
+            y: viewBox.cy,
+            style: { fontSize: "2rem", fontWeight: 600 },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "tspan",
+          {
+            x: viewBox.cx,
+            y: (viewBox.cy || 0) + gap,
+            style: { fill: chart.color("fg.muted") },
+            children: description
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ChartGradient, ChartLegend, ChartRadialText, ChartRoot, ChartTooltip };

package/dist/esm/chart/index.js

@@ -0,0 +1,4 @@
+"use strict";
+export { ChartGradient, ChartLegend, ChartRadialText, ChartRoot, ChartTooltip } from './chart.js';
+import * as namespace from './namespace.js';
+export { namespace as Chart };

package/dist/esm/chart/namespace.js

@@ -0,0 +1,2 @@
+"use strict";
+export { ChartGradient as Gradient, ChartLegend as Legend, ChartRadialText as RadialText, ChartRoot as Root, ChartTooltip as Tooltip } from './chart.js';

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+"use strict";
+export { useChart } from './use-chart.js';
+export { ChartGradient, ChartLegend, ChartRadialText, ChartRoot, ChartTooltip } from './chart/chart.js';
+import * as namespace from './chart/namespace.js';
+export { namespace as Chart };
+export { BarListBar, BarListContent, BarListLabel, BarListRoot, BarListTitle, BarListTooltip, BarListValue } from './bar-list/bar-list.js';
+import * as namespace$1 from './bar-list/namespace.js';
+export { namespace$1 as BarList };
+export { BarSegmentBar, BarSegmentContent, BarSegmentLabel, BarSegmentLegend, BarSegmentReference, BarSegmentRoot, BarSegmentValue } from './bar-segment/bar-segment.js';
+import * as namespace$2 from './bar-segment/namespace.js';
+export { namespace$2 as BarSegment };

package/dist/esm/use-chart.js

@@ -0,0 +1,108 @@
+"use strict";
+"use client";
+import { useLocaleContext, useChakraContext } from '@chakra-ui/react';
+import * as React from 'react';
+
+function useChart(props) {
+  const { data, series = [], sort } = props;
+  const id = React.useId();
+  const [selectedSeries, setSelectedSeries] = React.useState(
+    null
+  );
+  const [highlightedSeries, setHighlightedSeries] = React.useState(null);
+  const env = useLocaleContext();
+  const sys = useChakraContext();
+  const color = (key2) => sys.token(`colors.${key2}`, key2);
+  const size = (key2) => sys.token(`sizes.${key2}`, key2);
+  const spacing = (key2) => sys.token(`spacing.${key2}`, key2);
+  const key = (prop) => prop ?? "value";
+  const formatNumber = React.useCallback(
+    (options) => {
+      const formatter = new Intl.NumberFormat(env.locale, options);
+      return (value) => formatter.format(value);
+    },
+    [env.locale]
+  );
+  const formatDate = React.useCallback(
+    (options) => {
+      return (value) => new Date(value).toLocaleDateString(env.locale, options);
+    },
+    [env.locale]
+  );
+  const getSeries = (item) => {
+    if (!isObject(item)) return;
+    const result = series.find((s) => {
+      return s.name === item.name || s.name === getProp(item.payload, "name") || s.name === item.dataKey || s.name === getProp(item.payload, "dataKey");
+    }) || { color: void 0 };
+    result.color || (result.color = getProp(item.payload, "color"));
+    result.label || (result.label = result.name?.toLocaleString() || getProp(item.payload, "name"));
+    return result;
+  };
+  const getTotal = (key2) => {
+    return data.reduce((acc, d) => acc + Number(d[key2]), 0);
+  };
+  function getPayloadTotal(payload) {
+    return payload?.reduce((acc, item) => {
+      if (!item.value) return acc;
+      const num = Number(item.value);
+      const value = Number.isNaN(num) ? 0 : num;
+      return acc + value;
+    }, 0);
+  }
+  function getMin(key2) {
+    return Math.min(...data.map((d) => Number(d[key2])));
+  }
+  function getMax(key2) {
+    return Math.max(...data.map((d) => Number(d[key2])));
+  }
+  function getValuePercent(key2, value, domain) {
+    const min = getMin(key2);
+    const max = getMax(key2);
+    if (domain) {
+      const d = typeof domain === "function" ? domain({ min, max }) : domain;
+      return (value - d[0]) / (d[1] - d[0]) * 100;
+    }
+    return value / getTotal(key2) * 100;
+  }
+  const sortedData = React.useMemo(() => {
+    if (!sort) return data;
+    return data.sort((a, b) => {
+      const aValue = Number(a[sort.by]);
+      const bValue = Number(b[sort.by]);
+      return sort.direction === "desc" ? bValue - aValue : aValue - bValue;
+    });
+  }, [data, sort]);
+  return {
+    id,
+    key,
+    // series
+    data: sortedData,
+    series,
+    getSeries,
+    // token functions
+    color,
+    size,
+    spacing,
+    // formatters
+    formatNumber,
+    formatDate,
+    // state
+    selectedSeries,
+    setSelectedSeries,
+    highlightedSeries,
+    setHighlightedSeries,
+    // value functions
+    getTotal,
+    getMin,
+    getMax,
+    getPayloadTotal,
+    getValuePercent
+  };
+}
+const isObject = (value) => typeof value === "object" && value !== null;
+function getProp(item, key) {
+  if (!key || !isObject(item)) return;
+  return Reflect.get(item, key);
+}
+
+export { getProp, useChart };

package/dist/types/bar-list/bar-list.d.ts

@@ -0,0 +1,40 @@
+import type { AbsoluteCenterProps, FlexProps, StackProps, Tokens } from "@chakra-ui/react";
+import * as React from "react";
+import { type UseChartReturn } from "../use-chart";
+export interface BarListData {
+    name: string;
+    value: number;
+    href?: string;
+}
+interface ChartProps {
+    chart: UseChartReturn<BarListData>;
+}
+export interface BarListRootProps extends StackProps, ChartProps {
+    barSize?: Tokens["sizes"];
+}
+export declare function BarListRoot(props: BarListRootProps): import("react/jsx-runtime").JSX.Element;
+export declare const BarListTitle: (props: StackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BarListContent: (props: FlexProps) => import("react/jsx-runtime").JSX.Element;
+export interface BarListTooltipProps extends AbsoluteCenterProps {
+    payload: BarListData;
+    labelFormatter?: (value: number) => React.ReactNode;
+}
+export declare function BarListTooltip(props: BarListTooltipProps): import("react/jsx-runtime").JSX.Element;
+export interface BarListBarProps extends StackProps {
+    showTooltip?: boolean;
+    label?: (props: {
+        payload: BarListData;
+        index: number;
+    }) => React.ReactNode;
+}
+export declare function BarListBar(props: BarListBarProps): import("react/jsx-runtime").JSX.Element;
+export interface BarListValueProps extends StackProps {
+    valueFormatter?: (value: number) => React.ReactNode;
+}
+export declare function BarListValue(props: BarListValueProps): import("react/jsx-runtime").JSX.Element;
+export interface BarListLabelProps extends Omit<StackProps, "title"> {
+    title: React.ReactNode;
+    titleAlignment?: StackProps["textAlign"];
+}
+export declare function BarListLabel(props: BarListLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/bar-list/index.d.ts

@@ -0,0 +1,3 @@
+export { BarListBar, BarListContent, BarListRoot, BarListValue, BarListTitle, BarListLabel, BarListTooltip, } from "./bar-list";
+export type { BarListData, BarListBarProps, BarListRootProps, BarListValueProps, BarListLabelProps, BarListTooltipProps, } from "./bar-list";
+export * as BarList from "./namespace";

package/dist/types/bar-list/namespace.d.ts

@@ -0,0 +1,2 @@
+export { BarListContent as Content, BarListRoot as Root, BarListValue as Value, BarListBar as Bar, BarListTitle as Title, BarListLabel as Label, BarListTooltip as Tooltip, } from "./bar-list";
+export type { BarListData as Data, BarListBarProps as BarProps, BarListRootProps as RootProps, BarListValueProps as ValueProps, BarListLabelProps as LabelProps, BarListTooltipProps as TooltipProps, } from "./bar-list";

package/dist/types/bar-segment/bar-segment.d.ts

@@ -0,0 +1,42 @@
+import type { StackProps, Tokens } from "@chakra-ui/react";
+import * as React from "react";
+import type { UseChartReturn } from "../use-chart";
+export interface BarSegmentData {
+    name: string;
+    value: number;
+    color: string;
+}
+interface ChartProps {
+    chart: UseChartReturn<BarSegmentData>;
+}
+export interface BarSegmentRootProps extends StackProps, ChartProps {
+    barSize?: Tokens["sizes"];
+}
+export declare function BarSegmentRoot(props: BarSegmentRootProps): import("react/jsx-runtime").JSX.Element;
+export declare const BarSegmentContent: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export interface BarSegmentLabelProps extends StackProps {
+}
+export declare function BarSegmentLabel(props: BarSegmentLabelProps): import("react/jsx-runtime").JSX.Element;
+export interface BarSegmentBarProps extends StackProps {
+    showTooltip?: boolean;
+}
+export declare function BarSegmentBar(props: BarSegmentBarProps): import("react/jsx-runtime").JSX.Element;
+export interface BarSegmentReferenceProps {
+    value: number;
+    label?: React.ReactNode;
+}
+export declare function BarSegmentReference(props: BarSegmentReferenceProps): import("react/jsx-runtime").JSX.Element;
+export interface BarSegmentValueProps extends StackProps {
+}
+export declare function BarSegmentValue(props: BarSegmentValueProps): import("react/jsx-runtime").JSX.Element;
+export interface BarSegmentLegendProps extends StackProps {
+    showPercent?: boolean;
+    showValue?: boolean;
+    valueFormatter?: (value: number) => string;
+}
+export declare function BarSegmentLegend(props: BarSegmentLegendProps): import("react/jsx-runtime").JSX.Element;
+export interface BarSegmentTooltipProps {
+    payload: BarSegmentData;
+}
+export declare function BarSegmentTooltip(props: BarSegmentTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/bar-segment/index.d.ts

@@ -0,0 +1,3 @@
+export { BarSegmentBar, BarSegmentContent, BarSegmentLabel, BarSegmentRoot, BarSegmentValue, BarSegmentLegend, BarSegmentReference, } from "./bar-segment";
+export type { BarSegmentData, BarSegmentLegendProps, BarSegmentRootProps, BarSegmentValueProps, BarSegmentReferenceProps, BarSegmentBarProps, BarSegmentLabelProps, BarSegmentTooltipProps, } from "./bar-segment";
+export * as BarSegment from "./namespace";

package/dist/types/bar-segment/namespace.d.ts

@@ -0,0 +1,2 @@
+export { BarSegmentBar as Bar, BarSegmentContent as Content, BarSegmentLabel as Label, BarSegmentRoot as Root, BarSegmentValue as Value, BarSegmentLegend as Legend, BarSegmentReference as Reference, } from "./bar-segment";
+export type { BarSegmentData as Data, BarSegmentLegendProps as LegendProps, BarSegmentRootProps as RootProps, BarSegmentValueProps as ValueProps, BarSegmentReferenceProps as ReferenceProps, BarSegmentBarProps as BarProps, BarSegmentLabelProps as LabelProps, BarSegmentTooltipProps as TooltipProps, } from "./bar-segment";