@impulse-ui-native/charts 2.2.0 → 2.3.0

package/README.md

@@ -4,7 +4,7 @@ Skia-rendered chart components and primitives for Impulse UI Native.
 
 ## Components
 
-The package provides Skia-rendered `LineChart`, `MultiLineChart`, `BarChart`, and `MultiBarChart` components. Charts fill their parent, so give the surrounding view an explicit height.
+The package provides Skia-rendered `LineChart`, `MultiLineChart`, `BarChart`, `MultiBarChart`, `PieChart`, and `MultiPieChart` components. Charts fill their parent, so give the surrounding view an explicit height.
 
 ```tsx
 import { BarChart } from "@impulse-ui-native/charts";
@@ -52,6 +52,53 @@ Bar charts support string, number, and `Date` categories, nullable values, posit
 
 `categoryPadding` and `seriesPadding` are ratios clamped between `0` and `1`. Multi-series bars use the theme's chart palette unless a series supplies `bar.color`.
 
+Use `PieChart` for pies and donuts. Slice values must be positive finite numbers; invalid, zero, and negative values are ignored. Colors follow the chart palette unless a datum supplies `color`.
+
+```tsx
+import { PieChart } from "@impulse-ui-native/charts";
+
+<PieChart
+  data={[
+    { id: "mobile", value: 46 },
+    { id: "desktop", value: 34 },
+    { id: "tablet", value: 20 },
+  ]}
+  innerRadius={0.5}
+  outerRadius={0.9}
+  padAngle={2}
+  slice={{ cornerRadius: 4, strokeColor: "#fff", strokeWidth: 2 }}
+/>;
+```
+
+`innerRadius` and `outerRadius` are ratios of the available radius and are clamped between `0` and `1`. Angles use degrees, measured clockwise from 12 o'clock. The defaults render a complete circle from `0` through `360` degrees.
+
+Use `MultiPieChart` for independently normalized concentric series. The first series is the outermost ring, and angular padding keeps a consistent visual width across all rings.
+
+```tsx
+import { MultiPieChart } from "@impulse-ui-native/charts";
+
+<MultiPieChart
+  series={[
+    {
+      id: "current",
+      data: [
+        { id: "organic", value: 42 },
+        { id: "paid", value: 33 },
+      ],
+    },
+    {
+      id: "previous",
+      data: [
+        { id: "organic", value: 36 },
+        { id: "paid", value: 29 },
+      ],
+    },
+  ]}
+  innerRadius={0.25}
+  ringPadding={4}
+/>;
+```
+
 ## Scope
 
 - Token-aware chart primitives for React Native.

package/dist/components/{bar-chart-body.d.mts → bar-chart/bar-chart-body.d.mts}

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AppTheme } from '@impulse-ui-native/theme';
-import { ChartSize } from '../types/common.types.mjs';
-import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
-import { BarChartProps } from '../types/bar-chart.types.mjs';
-import '../types/style.types.mjs';
+import { ChartSize } from '../../types/common.types.mjs';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { BarChartProps } from '../../types/bar-chart.types.mjs';
+import '../../types/style.types.mjs';
 import '@shopify/react-native-skia';
 
 interface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {

package/dist/components/{bar-chart-body.js → bar-chart/bar-chart-body.js}

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
-import { useBarChart, useChartLayout } from "../hooks";
-import { ChartAxes } from "./chart-axes";
-import { Bar } from "./primitives";
+import { useBarChart, useChartLayout } from "../../hooks";
+import { ChartAxes } from "../chart-axes";
+import { Bar } from "../primitives";
 const BarChartBody = memo(function BarChartBodyComponent(props) {
   const {
     bar,

package/dist/components/bar-chart/bar-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/bar-chart/bar-chart-body.tsx"],"sourcesContent":["import { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useBarChart, useChartLayout } from \"../../hooks\";\nimport { BarChartProps, ChartSize, ChartXValue } from \"../../types\";\nimport { ChartAxes } from \"../chart-axes\";\nimport { Bar } from \"../primitives\";\n\ninterface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {\n  size: ChartSize;\n  theme: AppTheme;\n}\n\nexport const BarChartBody = memo(function BarChartBodyComponent<\n  X extends ChartXValue = string,\n>(props: BarChartBodyProps<X>) {\n  const {\n    bar,\n    categoryPadding,\n    data,\n    fontManager,\n    grid,\n    insets,\n    size,\n    theme,\n    xAxis,\n    yAxis,\n  } = props;\n  const layout = useChartLayout(size, insets);\n  const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({\n    categoryPadding,\n    data,\n    plot: layout.plot,\n    xAxis,\n    yAxis,\n  });\n\n  return (\n    <>\n      <ChartAxes\n        fontManager={fontManager}\n        grid={grid}\n        layout={layout}\n        theme={theme}\n        xAxis={xAxis}\n        xScale={xScale}\n        xTicks={xTicks}\n        yAxis={yAxis}\n        yScale={yScale}\n        yTicks={yTicks}\n      />\n\n      <Group clip={layout.plot}>\n        <Bar coordinates={coordinates} {...bar} />\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AAwCI,mBACE,KADF;AAxCJ,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,aAAa,sBAAsB;AAE5C,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AAOb,MAAM,eAAe,KAAK,SAAS,sBAExC,OAA6B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAC1C,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,YAAY;AAAA,IAClE;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,OAAI,aAA2B,GAAG,KAAK,GAC1C;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/{bar-chart.d.mts → bar-chart/bar-chart.d.mts}

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
-import { BarChartProps } from '../types/bar-chart.types.mjs';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { BarChartProps } from '../../types/bar-chart.types.mjs';
 import '@shopify/react-native-skia';
-import '../types/common.types.mjs';
-import '../types/style.types.mjs';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
 import '@impulse-ui-native/theme';
 
 declare const BarChart: <X extends ChartXValue = string>(props: BarChartProps<X>) => react_jsx_runtime.JSX.Element;

package/dist/components/{bar-chart.js → bar-chart/bar-chart.js}

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import { Canvas } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
 import { useTheme } from "@impulse-ui-native/theme";
-import { useChartCanvas } from "../hooks";
+import { useChartCanvas } from "../../hooks";
 import { BarChartBody } from "./bar-chart-body";
 const BarChart = memo(function BarChart2(props) {
   const theme = useTheme();

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../../hooks\";\nimport { BarChartProps, ChartXValue } from \"../../types\";\nimport { BarChartBody } from \"./bar-chart-body\";\n\nexport const BarChart = memo(function BarChart<X extends ChartXValue = string>(\n  props: BarChartProps<X>,\n) {\n  const theme = useTheme();\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <BarChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAEtB,MAAM,WAAW,KAAK,SAASA,UACpC,OACA;AACA,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,gBAAc,GAAG,OAAO,MAAY,OAAc,GACrD;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["BarChart"]}

package/dist/components/bar-chart/index.d.mts

@@ -0,0 +1,8 @@
+export { BarChart } from './bar-chart.mjs';
+import 'react/jsx-runtime';
+import '../../line-chart.types-yxru5uWc.mjs';
+import '@shopify/react-native-skia';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+import '../../types/bar-chart.types.mjs';

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

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

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

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

package/dist/components/{chart-axes.d.mts → chart-axes/chart-axes.d.mts}

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SkTypefaceFontProvider } from '@shopify/react-native-skia';
 import { AppTheme } from '@impulse-ui-native/theme';
-import { ChartLayout, ChartXAxisOptions, ChartYAxisOptions } from '../types/common.types.mjs';
-import { b as ChartXValue, a as ChartGridOptions, h as LineChartScale } from '../line-chart.types-yxru5uWc.mjs';
-import '../types/style.types.mjs';
+import { ChartLayout, ChartXAxisOptions, ChartYAxisOptions } from '../../types/common.types.mjs';
+import { b as ChartXValue, a as ChartGridOptions, h as LineChartScale } from '../../line-chart.types-yxru5uWc.mjs';
+import '../../types/style.types.mjs';
 
 interface ChartAxesProps<X extends ChartXValue> {
     fontManager?: SkTypefaceFontProvider;

package/dist/components/{chart-axes.js → chart-axes/chart-axes.js}

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "@impulse-ui-native/core";
-import { Grid, XAxis, YAxis } from "./primitives";
+import { Grid, XAxis, YAxis } from "../primitives";
 const ChartAxes = memo(function ChartAxes2(props) {
   const {
     fontManager,

package/dist/components/chart-axes/chart-axes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/chart-axes/chart-axes.tsx"],"sourcesContent":["import { SkTypefaceFontProvider } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport {\n  ChartGridOptions,\n  ChartLayout,\n  ChartXAxisOptions,\n  ChartXValue,\n  ChartYAxisOptions,\n  LineChartScale,\n} from \"../../types\";\nimport { Grid, XAxis, YAxis } from \"../primitives\";\n\ninterface ChartAxesProps<X extends ChartXValue> {\n  fontManager?: SkTypefaceFontProvider;\n  grid?: ChartGridOptions;\n  layout: ChartLayout;\n  theme: AppTheme;\n  xAxis?: ChartXAxisOptions<X>;\n  xScale: LineChartScale<X>;\n  xTicks: readonly X[];\n  yAxis?: ChartYAxisOptions;\n  yScale: LineChartScale<number>;\n  yTicks: readonly number[];\n}\n\nexport const ChartAxes = memo(function ChartAxes<\n  X extends ChartXValue = number,\n>(props: ChartAxesProps<X>) {\n  const {\n    fontManager,\n    grid,\n    layout,\n    theme,\n    xAxis,\n    xScale,\n    xTicks,\n    yAxis,\n    yScale,\n    yTicks,\n  } = props;\n  const isGridStyle = grid !== undefined;\n\n  return (\n    <>\n      {isGridStyle ? (\n        <Grid\n          options={grid}\n          plot={layout.plot}\n          theme={theme}\n          xTicks={xTicks}\n          xScale={xScale}\n          yTicks={yTicks}\n          yScale={yScale}\n        />\n      ) : null}\n\n      {xAxis?.visible !== false ? (\n        <XAxis\n          ticks={xTicks}\n          scale={xScale}\n          plot={layout.plot}\n          region={layout.xAxis}\n          theme={theme}\n          options={xAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      {yAxis?.visible !== false ? (\n        <YAxis\n          ticks={yTicks}\n          scale={yScale}\n          plot={layout.plot}\n          region={layout.yAxis}\n          theme={theme}\n          options={yAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n    </>\n  );\n});\n"],"mappings":"AA8CI,mBAEI,KAFJ;AA5CJ,SAAS,YAAY;AAWrB,SAAS,MAAM,OAAO,aAAa;AAe5B,MAAM,YAAY,KAAK,SAASA,WAErC,OAA0B;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,KACN;AAEJ,CAAC;","names":["ChartAxes"]}

package/dist/components/chart-axes/index.d.mts

@@ -0,0 +1,7 @@
+export { ChartAxes } from './chart-axes.mjs';
+import 'react/jsx-runtime';
+import '@shopify/react-native-skia';
+import '@impulse-ui-native/theme';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '../../line-chart.types-yxru5uWc.mjs';

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

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

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

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

package/dist/components/index.d.mts

@@ -2,12 +2,15 @@ export { Bar } from './primitives/bar.mjs';
 export { Grid } from './primitives/grid.mjs';
 export { Label } from './primitives/label.mjs';
 export { Line } from './primitives/line.mjs';
+export { Pie } from './primitives/pie.mjs';
 export { XAxis } from './primitives/x-axis.mjs';
 export { YAxis } from './primitives/y-axis.mjs';
-export { BarChart } from './bar-chart.mjs';
-export { LineChart } from './line-chart.mjs';
-export { MultiBarChart } from './multi-bar-chart.mjs';
-export { MultiLineChart } from './multi-line-chart.mjs';
+export { BarChart } from './bar-chart/bar-chart.mjs';
+export { LineChart } from './line-chart/line-chart.mjs';
+export { MultiBarChart } from './multi-bar-chart/multi-bar-chart.mjs';
+export { MultiLineChart } from './multi-line-chart/multi-line-chart.mjs';
+export { MultiPieChart } from './multi-pie-chart/multi-pie-chart.mjs';
+export { PieChart } from './pie-chart/pie-chart.mjs';
 import 'react/jsx-runtime';
 import '../line-chart.types-yxru5uWc.mjs';
 import '@shopify/react-native-skia';
@@ -18,6 +21,9 @@ import '../types/bar.types.mjs';
 import '../types/bar-chart.types.mjs';
 import '../types/label.types.mjs';
 import '../types/line.types.mjs';
+import '../types/pie.types.mjs';
+import '../types/pie-chart.types.mjs';
 import '../types/axis.types.mjs';
 import '../types/multi-bar-chart.types.mjs';
 import '../types/multi-line-chart.types.mjs';
+import '../types/multi-pie-chart.types.mjs';

package/dist/components/index.js

@@ -3,10 +3,14 @@ import { BarChart } from "./bar-chart";
 import { LineChart } from "./line-chart";
 import { MultiBarChart } from "./multi-bar-chart";
 import { MultiLineChart } from "./multi-line-chart";
+import { MultiPieChart } from "./multi-pie-chart";
+import { PieChart } from "./pie-chart";
 export {
   BarChart,
   LineChart,
   MultiBarChart,
-  MultiLineChart
+  MultiLineChart,
+  MultiPieChart,
+  PieChart
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./primitives\";\nexport { BarChart } from \"./bar-chart\";\nexport { LineChart } from \"./line-chart\";\nexport { MultiBarChart } from \"./multi-bar-chart\";\nexport { MultiLineChart } from \"./multi-line-chart\";\n"],"mappings":"AAAA,cAAc;AACd,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;","names":[]}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./primitives\";\nexport { BarChart } from \"./bar-chart\";\nexport { LineChart } from \"./line-chart\";\nexport { MultiBarChart } from \"./multi-bar-chart\";\nexport { MultiLineChart } from \"./multi-line-chart\";\nexport { MultiPieChart } from \"./multi-pie-chart\";\nexport { PieChart } from \"./pie-chart\";\n"],"mappings":"AAAA,cAAc;AACd,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;","names":[]}

package/dist/components/line-chart/index.d.mts

@@ -0,0 +1,7 @@
+export { LineChart } from './line-chart.mjs';
+import 'react/jsx-runtime';
+import '../../line-chart.types-yxru5uWc.mjs';
+import '@shopify/react-native-skia';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '@impulse-ui-native/theme';

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

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

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

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

package/dist/components/{line-chart-body.d.mts → line-chart/line-chart-body.d.mts}

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AppTheme } from '@impulse-ui-native/theme';
-import { ChartSize } from '../types/common.types.mjs';
-import { b as ChartXValue, g as LineChartProps } from '../line-chart.types-yxru5uWc.mjs';
-import '../types/style.types.mjs';
+import { ChartSize } from '../../types/common.types.mjs';
+import { b as ChartXValue, g as LineChartProps } from '../../line-chart.types-yxru5uWc.mjs';
+import '../../types/style.types.mjs';
 import '@shopify/react-native-skia';
 
 interface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {

package/dist/components/{line-chart-body.js → line-chart/line-chart-body.js}

@@ -2,10 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Group } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
-import { LineDefaultWidth } from "../constants";
-import { useChartLayout, useLineChart } from "../hooks";
-import { createInsetRect, fitLineCoordinatesToRect } from "../utils";
-import { Grid, Line, XAxis, YAxis } from "./primitives";
+import { LineDefaultWidth } from "../../constants";
+import { useChartLayout, useLineChart } from "../../hooks";
+import { createInsetRect, fitLineCoordinatesToRect } from "../../utils";
+import { Grid, Line, XAxis, YAxis } from "../primitives";
 const LineChartBody = memo(function LineChartBodyComponent(props) {
   const {
     data,

package/dist/components/line-chart/line-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/line-chart/line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { LineDefaultWidth } from \"../../constants\";\nimport { useChartLayout, useLineChart } from \"../../hooks\";\nimport { ChartSize, ChartXValue, LineChartProps } from \"../../types\";\nimport { createInsetRect, fitLineCoordinatesToRect } from \"../../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"../primitives\";\n\ninterface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {\n  size: ChartSize;\n  theme: AppTheme;\n}\n\nexport const LineChartBody = memo(function LineChartBodyComponent<\n  X extends ChartXValue = number,\n>(props: LineChartBodyProps<X>) {\n  const {\n    data,\n    fontManager,\n    grid,\n    insets,\n    line,\n    size,\n    theme,\n    xAxis,\n    xScaleType,\n    yAxis,\n  } = props;\n\n  const layout = useChartLayout(size, insets);\n\n  const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({\n    data,\n    plot: layout.plot,\n    xAxis,\n    xScaleType,\n    yAxis,\n  });\n\n  const linePlot = useMemo(\n    () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),\n    [layout.plot, line?.width],\n  );\n\n  const lineCoordinates = useMemo(\n    () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),\n    [coordinates, layout.plot, linePlot],\n  );\n\n  const isGridStyle = grid !== undefined;\n\n  return (\n    <>\n      {isGridStyle ? (\n        <Grid\n          options={grid}\n          plot={layout.plot}\n          theme={theme}\n          xTicks={xTicks}\n          xScale={xScale}\n          yTicks={yTicks}\n          yScale={yScale}\n        />\n      ) : null}\n\n      {xAxis?.visible !== false ? (\n        <XAxis\n          ticks={xTicks}\n          scale={xScale}\n          plot={layout.plot}\n          region={layout.xAxis}\n          theme={theme}\n          options={xAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      {yAxis?.visible !== false ? (\n        <YAxis\n          ticks={yTicks}\n          scale={yScale}\n          plot={layout.plot}\n          region={layout.yAxis}\n          theme={theme}\n          options={yAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      <Group clip={layout.plot}>\n        <Line coordinates={lineCoordinates} {...line} />\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,oBAAoB;AAE7C,SAAS,iBAAiB,gCAAgC;AAC1D,SAAS,MAAM,MAAM,OAAO,aAAa;AAOlC,MAAM,gBAAgB,KAAK,SAAS,uBAEzC,OAA8B;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAE1C,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,aAAa;AAAA,IACnE;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW;AAAA,IACf,MAAM,gBAAgB,OAAO,OAAO,MAAM,SAAS,oBAAoB,CAAC;AAAA,IACxE,CAAC,OAAO,MAAM,MAAM,KAAK;AAAA,EAC3B;AAEA,QAAM,kBAAkB;AAAA,IACtB,MAAM,yBAAyB,aAAa,OAAO,MAAM,QAAQ;AAAA,IACjE,CAAC,aAAa,OAAO,MAAM,QAAQ;AAAA,EACrC;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,QAAK,aAAa,iBAAkB,GAAG,MAAM,GAChD;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/{line-chart.d.mts → line-chart/line-chart.d.mts}

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ChartXValue, g as LineChartProps } from '../line-chart.types-yxru5uWc.mjs';
+import { b as ChartXValue, g as LineChartProps } from '../../line-chart.types-yxru5uWc.mjs';
 import '@shopify/react-native-skia';
-import '../types/common.types.mjs';
-import '../types/style.types.mjs';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
 import '@impulse-ui-native/theme';
 
 declare const LineChart: <X extends ChartXValue = number>(props: LineChartProps<X>) => react_jsx_runtime.JSX.Element;

package/dist/components/{line-chart.js → line-chart/line-chart.js}

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import { Canvas } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
 import { useTheme } from "@impulse-ui-native/theme";
-import { useChartCanvas } from "../hooks";
+import { useChartCanvas } from "../../hooks";
 import { LineChartBody } from "./line-chart-body";
 const LineChart = memo(function LineChart2(props) {
   const theme = useTheme();

package/dist/components/line-chart/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../../hooks\";\nimport { ChartXValue, LineChartProps } from \"../../types\";\nimport { LineChartBody } from \"./line-chart-body\";\n\nexport const LineChart = memo(function LineChart<\n  X extends ChartXValue = number,\n>(props: LineChartProps<X>) {\n  const theme = useTheme();\n\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <LineChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAmBM;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAEvB,MAAM,YAAY,KAAK,SAASA,WAErC,OAA0B;AAC1B,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,iBAAe,GAAG,OAAO,MAAY,OAAc,GACtD;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["LineChart"]}

package/dist/components/multi-bar-chart/index.d.mts

@@ -0,0 +1,9 @@
+export { MultiBarChart } from './multi-bar-chart.mjs';
+import 'react/jsx-runtime';
+import '../../line-chart.types-yxru5uWc.mjs';
+import '@shopify/react-native-skia';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+import '../../types/multi-bar-chart.types.mjs';
+import '../../types/bar-chart.types.mjs';

package/dist/components/multi-bar-chart/index.js

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

package/dist/components/multi-bar-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-bar-chart/index.ts"],"sourcesContent":["export { MultiBarChart } from \"./multi-bar-chart\";\n"],"mappings":"AAAA,SAAS,qBAAqB;","names":[]}

package/dist/components/{multi-bar-chart-body.d.mts → multi-bar-chart/multi-bar-chart-body.d.mts}

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AppTheme } from '@impulse-ui-native/theme';
-import { ChartSize } from '../types/common.types.mjs';
-import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
-import { MultiBarChartProps } from '../types/multi-bar-chart.types.mjs';
-import '../types/style.types.mjs';
+import { ChartSize } from '../../types/common.types.mjs';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { MultiBarChartProps } from '../../types/multi-bar-chart.types.mjs';
+import '../../types/style.types.mjs';
 import '@shopify/react-native-skia';
-import '../types/bar-chart.types.mjs';
+import '../../types/bar-chart.types.mjs';
 
 interface MultiBarChartBodyProps<X extends ChartXValue> extends MultiBarChartProps<X> {
     size: ChartSize;

package/dist/components/{multi-bar-chart-body.js → multi-bar-chart/multi-bar-chart-body.js}

@@ -2,10 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Group } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
-import { useChartLayout, useMultiBarChart } from "../hooks";
-import { createDrawableMultiBarChartSeries } from "../utils";
-import { ChartAxes } from "./chart-axes";
-import { Bar } from "./primitives";
+import { useChartLayout, useMultiBarChart } from "../../hooks";
+import { createDrawableMultiBarChartSeries } from "../../utils";
+import { ChartAxes } from "../chart-axes";
+import { Bar } from "../primitives";
 const MultiBarChartBody = memo(function MultiBarChartBodyComponent(props) {
   const {
     categoryPadding,

package/dist/components/multi-bar-chart/multi-bar-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-bar-chart/multi-bar-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartLayout, useMultiBarChart } from \"../../hooks\";\nimport { ChartSize, ChartXValue, MultiBarChartProps } from \"../../types\";\nimport { createDrawableMultiBarChartSeries } from \"../../utils\";\nimport { ChartAxes } from \"../chart-axes\";\nimport { Bar } from \"../primitives\";\n\ninterface MultiBarChartBodyProps<\n  X extends ChartXValue,\n> extends MultiBarChartProps<X> {\n  size: ChartSize;\n  theme: AppTheme;\n}\n\nexport const MultiBarChartBody = memo(function MultiBarChartBodyComponent<\n  X extends ChartXValue = string,\n>(props: MultiBarChartBodyProps<X>) {\n  const {\n    categoryPadding,\n    fontManager,\n    grid,\n    insets,\n    series,\n    seriesPadding,\n    size,\n    theme,\n    xAxis,\n    yAxis,\n  } = props;\n  const layout = useChartLayout(size, insets);\n  const {\n    series: seriesModels,\n    xScale,\n    xTicks,\n    yScale,\n    yTicks,\n  } = useMultiBarChart({\n    categoryPadding,\n    plot: layout.plot,\n    series,\n    seriesPadding,\n    xAxis,\n    yAxis,\n  });\n  const drawableSeries = useMemo(\n    () =>\n      seriesModels.map((currentSeries, index) =>\n        createDrawableMultiBarChartSeries(currentSeries, index),\n      ),\n    [seriesModels],\n  );\n\n  return (\n    <>\n      <ChartAxes\n        fontManager={fontManager}\n        grid={grid}\n        layout={layout}\n        theme={theme}\n        xAxis={xAxis}\n        xScale={xScale}\n        xTicks={xTicks}\n        yAxis={yAxis}\n        yScale={yScale}\n        yTicks={yTicks}\n      />\n\n      <Group clip={layout.plot}>\n        {drawableSeries.map((currentSeries) => (\n          <Bar\n            key={currentSeries.id}\n            coordinates={currentSeries.coordinates}\n            {...currentSeries.bar}\n          />\n        ))}\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AA0DI,mBACE,KADF;AA1DJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,gBAAgB,wBAAwB;AAEjD,SAAS,yCAAyC;AAClD,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AASb,MAAM,oBAAoB,KAAK,SAAS,2BAE7C,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAC1C,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAAA,IACnB;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,kCAAkC,eAAe,KAAK;AAAA,IACxD;AAAA,IACF,CAAC,YAAY;AAAA,EACf;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/{multi-bar-chart.d.mts → multi-bar-chart/multi-bar-chart.d.mts}

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
-import { MultiBarChartProps } from '../types/multi-bar-chart.types.mjs';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { MultiBarChartProps } from '../../types/multi-bar-chart.types.mjs';
 import '@shopify/react-native-skia';
-import '../types/common.types.mjs';
-import '../types/style.types.mjs';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
 import '@impulse-ui-native/theme';
-import '../types/bar-chart.types.mjs';
+import '../../types/bar-chart.types.mjs';
 
 declare const MultiBarChart: <X extends ChartXValue = string>(props: MultiBarChartProps<X>) => react_jsx_runtime.JSX.Element;
 

package/dist/components/{multi-bar-chart.js → multi-bar-chart/multi-bar-chart.js}

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import { Canvas } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
 import { useTheme } from "@impulse-ui-native/theme";
-import { useChartCanvas } from "../hooks";
+import { useChartCanvas } from "../../hooks";
 import { MultiBarChartBody } from "./multi-bar-chart-body";
 const MultiBarChart = memo(function MultiBarChart2(props) {
   const theme = useTheme();

package/dist/components/multi-bar-chart/multi-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-bar-chart/multi-bar-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../../hooks\";\nimport { ChartXValue, MultiBarChartProps } from \"../../types\";\nimport { MultiBarChartBody } from \"./multi-bar-chart-body\";\n\nexport const MultiBarChart = memo(function MultiBarChart<\n  X extends ChartXValue = string,\n>(props: MultiBarChartProps<X>) {\n  const theme = useTheme();\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <MultiBarChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,KAAK,SAASA,eAEzC,OAA8B;AAC9B,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,qBAAmB,GAAG,OAAO,MAAY,OAAc,GAC1D;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["MultiBarChart"]}

package/dist/components/multi-line-chart/index.d.mts

@@ -0,0 +1,8 @@
+export { MultiLineChart } from './multi-line-chart.mjs';
+import 'react/jsx-runtime';
+import '../../line-chart.types-yxru5uWc.mjs';
+import '@shopify/react-native-skia';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+import '../../types/multi-line-chart.types.mjs';

package/dist/components/multi-line-chart/index.js

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

package/dist/components/multi-line-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-line-chart/index.ts"],"sourcesContent":["export { MultiLineChart } from \"./multi-line-chart\";\n"],"mappings":"AAAA,SAAS,sBAAsB;","names":[]}

package/dist/components/{multi-line-chart-body.d.mts → multi-line-chart/multi-line-chart-body.d.mts}

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
-import { MultiLineChartBodyProps } from '../types/multi-line-chart.types.mjs';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { MultiLineChartBodyProps } from '../../types/multi-line-chart.types.mjs';
 import '@shopify/react-native-skia';
-import '../types/common.types.mjs';
-import '../types/style.types.mjs';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
 import '@impulse-ui-native/theme';
 
 declare const MultiLineChartBody: <X extends ChartXValue = number>(props: MultiLineChartBodyProps<X>) => react_jsx_runtime.JSX.Element;

package/dist/components/{multi-line-chart-body.js → multi-line-chart/multi-line-chart-body.js}

@@ -2,9 +2,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Group } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
-import { useChartLayout, useMultiLineChart } from "../hooks";
-import { createDrawableMultiLineChartSeries } from "../utils";
-import { Grid, Line, XAxis, YAxis } from "./primitives";
+import { useChartLayout, useMultiLineChart } from "../../hooks";
+import { createDrawableMultiLineChartSeries } from "../../utils";
+import { Grid, Line, XAxis, YAxis } from "../primitives";
 const MultiLineChartBody = memo(function MultiLineChartBodyComponent(props) {
   const {
     fontManager,

package/dist/components/multi-line-chart/multi-line-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-line-chart/multi-line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartLayout, useMultiLineChart } from \"../../hooks\";\nimport { ChartXValue, MultiLineChartBodyProps } from \"../../types\";\nimport { createDrawableMultiLineChartSeries } from \"../../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"../primitives\";\n\nexport const MultiLineChartBody = memo(function MultiLineChartBodyComponent<\n  X extends ChartXValue = number,\n>(props: MultiLineChartBodyProps<X>) {\n  const {\n    fontManager,\n    grid,\n    insets,\n    series,\n    size,\n    theme,\n    xAxis,\n    xScaleType,\n    yAxis,\n  } = props;\n\n  const layout = useChartLayout(size, insets);\n\n  const {\n    series: seriesModels,\n    xScale,\n    xTicks,\n    yScale,\n    yTicks,\n  } = useMultiLineChart({\n    plot: layout.plot,\n    series,\n    xAxis,\n    xScaleType,\n    yAxis,\n  });\n\n  const drawableSeries = useMemo(\n    () =>\n      seriesModels.map((currentSeries, index) =>\n        createDrawableMultiLineChartSeries(currentSeries, index, layout.plot),\n      ),\n    [layout.plot, seriesModels],\n  );\n\n  const isGridStyle = grid !== undefined;\n\n  return (\n    <>\n      {isGridStyle ? (\n        <Grid\n          options={grid}\n          plot={layout.plot}\n          theme={theme}\n          xTicks={xTicks}\n          xScale={xScale}\n          yTicks={yTicks}\n          yScale={yScale}\n        />\n      ) : null}\n\n      {xAxis?.visible !== false ? (\n        <XAxis\n          ticks={xTicks}\n          scale={xScale}\n          plot={layout.plot}\n          region={layout.xAxis}\n          theme={theme}\n          options={xAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      {yAxis?.visible !== false ? (\n        <YAxis\n          ticks={yTicks}\n          scale={yScale}\n          plot={layout.plot}\n          region={layout.yAxis}\n          theme={theme}\n          options={yAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      <Group clip={layout.plot}>\n        {drawableSeries.map((currentSeries) => (\n          <Line\n            key={currentSeries.id}\n            coordinates={currentSeries.coordinates}\n            {...currentSeries.line}\n          />\n        ))}\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AAoDI,mBAEI,KAFJ;AApDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAErB,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,0CAA0C;AACnD,SAAS,MAAM,MAAM,OAAO,aAAa;AAElC,MAAM,qBAAqB,KAAK,SAAS,4BAE9C,OAAmC;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAE1C,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAAA,IACpB,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,mCAAmC,eAAe,OAAO,OAAO,IAAI;AAAA,IACtE;AAAA,IACF,CAAC,OAAO,MAAM,YAAY;AAAA,EAC5B;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/{multi-line-chart.d.mts → multi-line-chart/multi-line-chart.d.mts}

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
-import { MultiLineChartProps } from '../types/multi-line-chart.types.mjs';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { MultiLineChartProps } from '../../types/multi-line-chart.types.mjs';
 import '@shopify/react-native-skia';
-import '../types/common.types.mjs';
-import '../types/style.types.mjs';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
 import '@impulse-ui-native/theme';
 
 declare const MultiLineChart: <X extends ChartXValue = number>(props: MultiLineChartProps<X>) => react_jsx_runtime.JSX.Element;

package/dist/components/{multi-line-chart.js → multi-line-chart/multi-line-chart.js}

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import { Canvas } from "@shopify/react-native-skia";
 import { memo } from "@impulse-ui-native/core";
 import { useTheme } from "@impulse-ui-native/theme";
-import { useChartCanvas } from "../hooks";
+import { useChartCanvas } from "../../hooks";
 import { MultiLineChartBody } from "./multi-line-chart-body";
 const MultiLineChart = memo(function MultiLineChart2(props) {
   const theme = useTheme();

package/dist/components/multi-line-chart/multi-line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-line-chart/multi-line-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../../hooks\";\nimport { ChartXValue, MultiLineChartProps } from \"../../types\";\nimport { MultiLineChartBody } from \"./multi-line-chart-body\";\n\nexport const MultiLineChart = memo(function MultiLineChart<\n  X extends ChartXValue = number,\n>(props: MultiLineChartProps<X>) {\n  const theme = useTheme();\n\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <MultiLineChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAmBM;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,KAAK,SAASA,gBAE1C,OAA+B;AAC/B,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,sBAAoB,GAAG,OAAO,MAAY,OAAc,GAC3D;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["MultiLineChart"]}

package/dist/components/multi-pie-chart/index.d.mts

@@ -0,0 +1,7 @@
+export { MultiPieChart } from './multi-pie-chart.mjs';
+import 'react/jsx-runtime';
+import '../../types/multi-pie-chart.types.mjs';
+import '../../types/pie-chart.types.mjs';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '@shopify/react-native-skia';

package/dist/components/multi-pie-chart/index.js

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

package/dist/components/multi-pie-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-pie-chart/index.ts"],"sourcesContent":["export { MultiPieChart } from \"./multi-pie-chart\";\n"],"mappings":"AAAA,SAAS,qBAAqB;","names":[]}

package/dist/components/multi-pie-chart/multi-pie-chart-body.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChartSize } from '../../types/common.types.mjs';
+import { MultiPieChartProps } from '../../types/multi-pie-chart.types.mjs';
+import '../../types/style.types.mjs';
+import '@shopify/react-native-skia';
+import '../../types/pie-chart.types.mjs';
+
+interface MultiPieChartBodyProps extends MultiPieChartProps {
+    size: ChartSize;
+}
+declare const MultiPieChartBody: (props: MultiPieChartBodyProps) => react_jsx_runtime.JSX.Element;
+
+export { MultiPieChartBody };