@impulse-ui-native/charts 2.1.0 → 2.2.0

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

@@ -0,0 +1,95 @@
+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";
+const MultiLineChartBody = memo(function MultiLineChartBodyComponent(props) {
+  const {
+    fontManager,
+    grid,
+    insets,
+    series,
+    size,
+    theme,
+    xAxis,
+    xScaleType,
+    yAxis
+  } = props;
+  const layout = useChartLayout(size, insets);
+  const {
+    series: seriesModels,
+    xScale,
+    xTicks,
+    yScale,
+    yTicks
+  } = useMultiLineChart({
+    plot: layout.plot,
+    series,
+    xAxis,
+    xScaleType,
+    yAxis
+  });
+  const drawableSeries = useMemo(
+    () => seriesModels.map(
+      (currentSeries, index) => createDrawableMultiLineChartSeries(currentSeries, index, layout.plot)
+    ),
+    [layout.plot, seriesModels]
+  );
+  const isGridStyle = grid !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isGridStyle ? /* @__PURE__ */ jsx(
+      Grid,
+      {
+        options: grid,
+        plot: layout.plot,
+        theme,
+        xTicks,
+        xScale,
+        yTicks,
+        yScale
+      }
+    ) : null,
+    xAxis?.visible !== false ? /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        ticks: xTicks,
+        scale: xScale,
+        plot: layout.plot,
+        region: layout.xAxis,
+        theme,
+        options: xAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    yAxis?.visible !== false ? /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        ticks: yTicks,
+        scale: yScale,
+        plot: layout.plot,
+        region: layout.yAxis,
+        theme,
+        options: yAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Group, { clip: layout.plot, children: drawableSeries.map((currentSeries) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        coordinates: currentSeries.coordinates,
+        ...currentSeries.line
+      },
+      currentSeries.id
+    )) })
+  ] });
+});
+export {
+  MultiLineChartBody
+};
+//# sourceMappingURL=multi-line-chart-body.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/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

@@ -0,0 +1,11 @@
+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 '@shopify/react-native-skia';
+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;
+
+export { MultiLineChart };

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

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+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 { MultiLineChartBody } from "./multi-line-chart-body";
+const MultiLineChart = memo(function MultiLineChart2(props) {
+  const theme = useTheme();
+  const { ref, size } = useChartCanvas();
+  return /* @__PURE__ */ jsx(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx(MultiLineChartBody, { ...props, size, theme }) });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export {
+  MultiLineChart
+};
+//# sourceMappingURL=multi-line-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/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/primitives/bar.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
+import { BarProps } from '../../types/bar.types.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';
+
+declare const Bar: <X extends ChartXValue = string>(props: BarProps<X>) => react_jsx_runtime.JSX.Element | null;
+
+export { Bar };

package/dist/components/primitives/bar.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { Group, RoundedRect } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import {
+  BarDefaultColor,
+  BarDefaultOpacity,
+  BarDefaultRadius
+} from "../../constants";
+const Bar = memo(function Bar2(props) {
+  const {
+    color = BarDefaultColor,
+    coordinates,
+    opacity = BarDefaultOpacity,
+    radius = BarDefaultRadius,
+    visible = true
+  } = props;
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Group, { children: coordinates.map((coordinate) => {
+    const resolvedRadius = Math.min(
+      Math.max(0, radius),
+      coordinate.width / 2,
+      coordinate.height / 2
+    );
+    return coordinate.height > 0 ? /* @__PURE__ */ jsx(
+      RoundedRect,
+      {
+        x: coordinate.x,
+        y: coordinate.y,
+        width: coordinate.width,
+        height: coordinate.height,
+        r: resolvedRadius,
+        color,
+        opacity
+      },
+      coordinate.index
+    ) : null;
+  }) });
+});
+export {
+  Bar
+};
+//# sourceMappingURL=bar.js.map

package/dist/components/primitives/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/bar.tsx"],"sourcesContent":["import { Group, RoundedRect } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n  BarDefaultColor,\n  BarDefaultOpacity,\n  BarDefaultRadius,\n} from \"../../constants\";\nimport { BarProps, ChartXValue } from \"../../types\";\n\nexport const Bar = memo(function Bar<X extends ChartXValue = string>(\n  props: BarProps<X>,\n) {\n  const {\n    color = BarDefaultColor,\n    coordinates,\n    opacity = BarDefaultOpacity,\n    radius = BarDefaultRadius,\n    visible = true,\n  } = props;\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <Group>\n      {coordinates.map((coordinate) => {\n        const resolvedRadius = Math.min(\n          Math.max(0, radius),\n          coordinate.width / 2,\n          coordinate.height / 2,\n        );\n\n        return coordinate.height > 0 ? (\n          <RoundedRect\n            key={coordinate.index}\n            x={coordinate.x}\n            y={coordinate.y}\n            width={coordinate.width}\n            height={coordinate.height}\n            r={resolvedRadius}\n            color={color}\n            opacity={opacity}\n          />\n        ) : null;\n      })}\n    </Group>\n  );\n});\n"],"mappings":"AAoCU;AApCV,SAAS,OAAO,mBAAmB;AAEnC,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,MAAM,KAAK,SAASA,KAC/B,OACA;AACA,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ,IAAI;AAEJ,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SACE,sBAAY,IAAI,CAAC,eAAe;AAC/B,UAAM,iBAAiB,KAAK;AAAA,MAC1B,KAAK,IAAI,GAAG,MAAM;AAAA,MAClB,WAAW,QAAQ;AAAA,MACnB,WAAW,SAAS;AAAA,IACtB;AAEA,WAAO,WAAW,SAAS,IACzB;AAAA,MAAC;AAAA;AAAA,QAEC,GAAG,WAAW;AAAA,QACd,GAAG,WAAW;AAAA,QACd,OAAO,WAAW;AAAA,QAClB,QAAQ,WAAW;AAAA,QACnB,GAAG;AAAA,QACH;AAAA,QACA;AAAA;AAAA,MAPK,WAAW;AAAA,IAQlB,IACE;AAAA,EACN,CAAC,GACH;AAEJ,CAAC;","names":["Bar"]}

package/dist/components/primitives/grid.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as ChartXValue, G as GridProps } from '../../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';
+
+declare const Grid: <X extends ChartXValue = number>(props: GridProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { Grid };

package/dist/components/primitives/grid.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DashPathEffect, Group, Path } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { GridDefaultXVisible, GridDefaultYVisible } from "../../constants";
+import {
+  createHorizontalGridPath,
+  createVerticalGridPath,
+  resolveGridLineOptions
+} from "../../utils";
+const Grid = memo(function Grid2(props) {
+  const { options, plot, theme, xScale, xTicks, yScale, yTicks } = props;
+  const xStyle = useMemo(
+    () => resolveGridLineOptions(
+      options?.x,
+      GridDefaultXVisible,
+      theme.colors.border.subtle.value
+    ),
+    [options?.x, theme.colors.border.subtle.value]
+  );
+  const yStyle = useMemo(
+    () => resolveGridLineOptions(
+      options?.y,
+      GridDefaultYVisible,
+      theme.colors.border.subtle.value
+    ),
+    [options?.y, theme.colors.border.subtle.value]
+  );
+  const xPath = useMemo(
+    () => createVerticalGridPath(xTicks, xScale, plot),
+    [plot, xScale, xTicks]
+  );
+  const yPath = useMemo(
+    () => createHorizontalGridPath(yTicks, yScale, plot),
+    [plot, yScale, yTicks]
+  );
+  return /* @__PURE__ */ jsxs(Group, { children: [
+    xStyle.visible && xPath ? /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: xPath,
+        color: xStyle.color,
+        opacity: xStyle.opacity,
+        strokeWidth: xStyle.width,
+        style: "stroke",
+        children: xStyle.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...xStyle.dash] }) : null
+      }
+    ) : null,
+    yStyle.visible && yPath ? /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: yPath,
+        color: yStyle.color,
+        opacity: yStyle.opacity,
+        strokeWidth: yStyle.width,
+        style: "stroke",
+        children: yStyle.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...yStyle.dash] }) : null
+      }
+    ) : null
+  ] });
+});
+export {
+  Grid
+};
+//# sourceMappingURL=grid.js.map

package/dist/components/primitives/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/grid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { DashPathEffect, Group, Path } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { GridDefaultXVisible, GridDefaultYVisible } from \"../../constants\";\nimport { ChartXValue, GridProps } from \"../../types\";\nimport {\n  createHorizontalGridPath,\n  createVerticalGridPath,\n  resolveGridLineOptions,\n} from \"../../utils\";\n\nexport const Grid = memo(function Grid<X extends ChartXValue = number>(\n  props: GridProps<X>,\n) {\n  const { options, plot, theme, xScale, xTicks, yScale, yTicks } = props;\n\n  const xStyle = useMemo(\n    () =>\n      resolveGridLineOptions(\n        options?.x,\n        GridDefaultXVisible,\n        theme.colors.border.subtle.value,\n      ),\n    [options?.x, theme.colors.border.subtle.value],\n  );\n\n  const yStyle = useMemo(\n    () =>\n      resolveGridLineOptions(\n        options?.y,\n        GridDefaultYVisible,\n        theme.colors.border.subtle.value,\n      ),\n    [options?.y, theme.colors.border.subtle.value],\n  );\n\n  const xPath = useMemo(\n    () => createVerticalGridPath(xTicks, xScale, plot),\n    [plot, xScale, xTicks],\n  );\n\n  const yPath = useMemo(\n    () => createHorizontalGridPath(yTicks, yScale, plot),\n    [plot, yScale, yTicks],\n  );\n\n  return (\n    <Group>\n      {xStyle.visible && xPath ? (\n        <Path\n          path={xPath}\n          color={xStyle.color}\n          opacity={xStyle.opacity}\n          strokeWidth={xStyle.width}\n          style=\"stroke\"\n        >\n          {xStyle.dash?.length ? (\n            <DashPathEffect intervals={[...xStyle.dash]} />\n          ) : null}\n        </Path>\n      ) : null}\n\n      {yStyle.visible && yPath ? (\n        <Path\n          path={yPath}\n          color={yStyle.color}\n          opacity={yStyle.opacity}\n          strokeWidth={yStyle.width}\n          style=\"stroke\"\n        >\n          {yStyle.dash?.length ? (\n            <DashPathEffect intervals={[...yStyle.dash]} />\n          ) : null}\n        </Path>\n      ) : null}\n    </Group>\n  );\n});\n"],"mappings":"AAiDI,SAUQ,KAVR;AAjDJ,SAAS,eAAe;AACxB,SAAS,gBAAgB,OAAO,YAAY;AAE5C,SAAS,YAAY;AAErB,SAAS,qBAAqB,2BAA2B;AAEzD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,OAAO,KAAK,SAASA,MAChC,OACA;AACA,QAAM,EAAE,SAAS,MAAM,OAAO,QAAQ,QAAQ,QAAQ,OAAO,IAAI;AAEjE,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MACE,SAAS;AAAA,MACT;AAAA,MACA,MAAM,OAAO,OAAO,OAAO;AAAA,IAC7B;AAAA,IACF,CAAC,SAAS,GAAG,MAAM,OAAO,OAAO,OAAO,KAAK;AAAA,EAC/C;AAEA,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MACE,SAAS;AAAA,MACT;AAAA,MACA,MAAM,OAAO,OAAO,OAAO;AAAA,IAC7B;AAAA,IACF,CAAC,SAAS,GAAG,MAAM,OAAO,OAAO,OAAO,KAAK;AAAA,EAC/C;AAEA,QAAM,QAAQ;AAAA,IACZ,MAAM,uBAAuB,QAAQ,QAAQ,IAAI;AAAA,IACjD,CAAC,MAAM,QAAQ,MAAM;AAAA,EACvB;AAEA,QAAM,QAAQ;AAAA,IACZ,MAAM,yBAAyB,QAAQ,QAAQ,IAAI;AAAA,IACnD,CAAC,MAAM,QAAQ,MAAM;AAAA,EACvB;AAEA,SACE,qBAAC,SACE;AAAA,WAAO,WAAW,QACjB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAO,OAAO;AAAA,QACd,SAAS,OAAO;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAM;AAAA,QAEL,iBAAO,MAAM,SACZ,oBAAC,kBAAe,WAAW,CAAC,GAAG,OAAO,IAAI,GAAG,IAC3C;AAAA;AAAA,IACN,IACE;AAAA,IAEH,OAAO,WAAW,QACjB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAO,OAAO;AAAA,QACd,SAAS,OAAO;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAM;AAAA,QAEL,iBAAO,MAAM,SACZ,oBAAC,kBAAe,WAAW,CAAC,GAAG,OAAO,IAAI,GAAG,IAC3C;AAAA;AAAA,IACN,IACE;AAAA,KACN;AAEJ,CAAC;","names":["Grid"]}

package/dist/components/primitives/index.d.mts

@@ -0,0 +1,17 @@
+export { Bar } from './bar.mjs';
+export { Grid } from './grid.mjs';
+export { Label } from './label.mjs';
+export { Line } from './line.mjs';
+export { XAxis } from './x-axis.mjs';
+export { YAxis } from './y-axis.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.types.mjs';
+import '../../types/bar-chart.types.mjs';
+import '../../types/label.types.mjs';
+import '../../types/line.types.mjs';
+import '../../types/axis.types.mjs';

package/dist/components/primitives/index.js

@@ -0,0 +1,15 @@
+import { Bar } from "./bar";
+import { Grid } from "./grid";
+import { Label } from "./label";
+import { Line } from "./line";
+import { XAxis } from "./x-axis";
+import { YAxis } from "./y-axis";
+export {
+  Bar,
+  Grid,
+  Label,
+  Line,
+  XAxis,
+  YAxis
+};
+//# sourceMappingURL=index.js.map

package/dist/components/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export { Bar } from \"./bar\";\nexport { Grid } from \"./grid\";\nexport { Label } from \"./label\";\nexport { Line } from \"./line\";\nexport { XAxis } from \"./x-axis\";\nexport { YAxis } from \"./y-axis\";\n"],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,aAAa;","names":[]}

package/dist/components/primitives/label.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LabelProps } from '../../types/label.types.mjs';
+import '@shopify/react-native-skia';
+import '@impulse-ui-native/theme';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+
+declare const Label: (props: LabelProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Label };

package/dist/components/primitives/label.js

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import {
+  Group,
+  Paragraph,
+  Skia
+} from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import {
+  LabelDefaultHorizontalAlignment,
+  LabelDefaultVerticalAlignment,
+  TabularNumsFeature
+} from "../../constants";
+import {
+  createParagraphBuilder,
+  getLabelTextAlign,
+  getLabelY
+} from "../../utils";
+const Label = memo(function Label2(props) {
+  const {
+    color,
+    fontManager,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    horizontalAlign = LabelDefaultHorizontalAlignment,
+    rect,
+    rotation = 0,
+    text,
+    theme,
+    tnum,
+    maxLines = 1,
+    verticalAlign = LabelDefaultVerticalAlignment
+  } = props;
+  const paragraph = useMemo(() => {
+    const fontFeatures = [];
+    if (tnum) {
+      fontFeatures.push(TabularNumsFeature);
+    }
+    const textStyle = {
+      color: Skia.Color(color ?? theme.colors.text.secondary),
+      fontSize: fontSize ?? theme.fontSize.xs,
+      fontFeatures
+    };
+    if (fontFamily) {
+      textStyle.fontFamilies = [fontFamily];
+    }
+    if (fontWeight !== void 0) {
+      textStyle.fontStyle = { weight: fontWeight };
+    }
+    const result = createParagraphBuilder({
+      paragraphStyle: {
+        ellipsis: "\u2026",
+        maxLines: Math.max(1, Math.floor(maxLines)),
+        textAlign: getLabelTextAlign(horizontalAlign)
+      },
+      typefaceProvider: fontManager
+    }).pushStyle(textStyle).addText(text).pop().build();
+    result.layout(rect.width);
+    return result;
+  }, [
+    color,
+    fontManager,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    horizontalAlign,
+    rect.width,
+    text,
+    theme.colors.text.secondary,
+    theme.fontSize.xs,
+    tnum,
+    maxLines
+  ]);
+  const rotationProps = useMemo(
+    () => ({
+      origin: {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      },
+      transform: [{ rotate: rotation * Math.PI / 180 }]
+    }),
+    [rect.height, rect.width, rect.x, rect.y, rotation]
+  );
+  if (!paragraph) {
+    return null;
+  }
+  const y = getLabelY(rect, paragraph.getHeight(), verticalAlign);
+  return /* @__PURE__ */ jsx(Group, { origin: rotationProps.origin, transform: rotationProps.transform, children: /* @__PURE__ */ jsx(Paragraph, { paragraph, x: rect.x, y, width: rect.width }) });
+});
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/components/primitives/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/label.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  Group,\n  Paragraph,\n  Skia,\n  SkTextFontFeatures,\n  SkTextStyle,\n} from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n  LabelDefaultHorizontalAlignment,\n  LabelDefaultVerticalAlignment,\n  TabularNumsFeature,\n} from \"../../constants\";\nimport { LabelProps } from \"../../types\";\nimport {\n  createParagraphBuilder,\n  getLabelTextAlign,\n  getLabelY,\n} from \"../../utils\";\n\nexport const Label = memo(function Label(props: LabelProps) {\n  const {\n    color,\n    fontManager,\n    fontSize,\n    fontFamily,\n    fontWeight,\n    horizontalAlign = LabelDefaultHorizontalAlignment,\n    rect,\n    rotation = 0,\n    text,\n    theme,\n    tnum,\n    maxLines = 1,\n    verticalAlign = LabelDefaultVerticalAlignment,\n  } = props;\n\n  const paragraph = useMemo(() => {\n    const fontFeatures: SkTextFontFeatures[] = [];\n\n    if (tnum) {\n      fontFeatures.push(TabularNumsFeature);\n    }\n\n    const textStyle: SkTextStyle = {\n      color: Skia.Color(color ?? theme.colors.text.secondary),\n      fontSize: fontSize ?? theme.fontSize.xs,\n      fontFeatures,\n    };\n\n    if (fontFamily) {\n      textStyle.fontFamilies = [fontFamily];\n    }\n\n    if (fontWeight !== undefined) {\n      textStyle.fontStyle = { weight: fontWeight };\n    }\n\n    const result = createParagraphBuilder({\n      paragraphStyle: {\n        ellipsis: \"\\u2026\",\n        maxLines: Math.max(1, Math.floor(maxLines)),\n        textAlign: getLabelTextAlign(horizontalAlign),\n      },\n      typefaceProvider: fontManager,\n    })\n      .pushStyle(textStyle)\n      .addText(text)\n      .pop()\n      .build();\n\n    result.layout(rect.width);\n\n    return result;\n  }, [\n    color,\n    fontManager,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    horizontalAlign,\n    rect.width,\n    text,\n    theme.colors.text.secondary,\n    theme.fontSize.xs,\n    tnum,\n    maxLines,\n  ]);\n\n  const rotationProps = useMemo(\n    () => ({\n      origin: {\n        x: rect.x + rect.width / 2,\n        y: rect.y + rect.height / 2,\n      },\n      transform: [{ rotate: (rotation * Math.PI) / 180 }],\n    }),\n    [rect.height, rect.width, rect.x, rect.y, rotation],\n  );\n\n  if (!paragraph) {\n    return null;\n  }\n\n  const y = getLabelY(rect, paragraph.getHeight(), verticalAlign);\n\n  return (\n    <Group origin={rotationProps.origin} transform={rotationProps.transform}>\n      <Paragraph paragraph={paragraph} x={rect.x} y={y} width={rect.width} />\n    </Group>\n  );\n});\n"],"mappings":"AA+GM;AA/GN,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,QAAQ,KAAK,SAASA,OAAM,OAAmB;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,IAAI;AAEJ,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,eAAqC,CAAC;AAE5C,QAAI,MAAM;AACR,mBAAa,KAAK,kBAAkB;AAAA,IACtC;AAEA,UAAM,YAAyB;AAAA,MAC7B,OAAO,KAAK,MAAM,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,MACtD,UAAU,YAAY,MAAM,SAAS;AAAA,MACrC;AAAA,IACF;AAEA,QAAI,YAAY;AACd,gBAAU,eAAe,CAAC,UAAU;AAAA,IACtC;AAEA,QAAI,eAAe,QAAW;AAC5B,gBAAU,YAAY,EAAE,QAAQ,WAAW;AAAA,IAC7C;AAEA,UAAM,SAAS,uBAAuB;AAAA,MACpC,gBAAgB;AAAA,QACd,UAAU;AAAA,QACV,UAAU,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC;AAAA,QAC1C,WAAW,kBAAkB,eAAe;AAAA,MAC9C;AAAA,MACA,kBAAkB;AAAA,IACpB,CAAC,EACE,UAAU,SAAS,EACnB,QAAQ,IAAI,EACZ,IAAI,EACJ,MAAM;AAET,WAAO,OAAO,KAAK,KAAK;AAExB,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM,OAAO,KAAK;AAAA,IAClB,MAAM,SAAS;AAAA,IACf;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL,QAAQ;AAAA,QACN,GAAG,KAAK,IAAI,KAAK,QAAQ;AAAA,QACzB,GAAG,KAAK,IAAI,KAAK,SAAS;AAAA,MAC5B;AAAA,MACA,WAAW,CAAC,EAAE,QAAS,WAAW,KAAK,KAAM,IAAI,CAAC;AAAA,IACpD;AAAA,IACA,CAAC,KAAK,QAAQ,KAAK,OAAO,KAAK,GAAG,KAAK,GAAG,QAAQ;AAAA,EACpD;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,QAAM,IAAI,UAAU,MAAM,UAAU,UAAU,GAAG,aAAa;AAE9D,SACE,oBAAC,SAAM,QAAQ,cAAc,QAAQ,WAAW,cAAc,WAC5D,8BAAC,aAAU,WAAsB,GAAG,KAAK,GAAG,GAAM,OAAO,KAAK,OAAO,GACvE;AAEJ,CAAC;","names":["Label"]}

package/dist/components/primitives/line.d.mts

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

package/dist/components/primitives/line.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DashPathEffect, Path } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import {
+  LineDefaultCap,
+  LineDefaultColor,
+  LineDefaultCurve,
+  LineDefaultJoin,
+  LineDefaultOpacity,
+  LineDefaultWidth
+} from "../../constants";
+import { createLinePath } from "../../utils";
+const Line = memo(function Line2(props) {
+  const {
+    cap = LineDefaultCap,
+    color = LineDefaultColor,
+    coordinates,
+    curve = LineDefaultCurve,
+    dash,
+    join = LineDefaultJoin,
+    opacity = LineDefaultOpacity,
+    visible = true,
+    width = LineDefaultWidth
+  } = props;
+  const path = useMemo(
+    () => createLinePath(coordinates, curve),
+    [coordinates, curve]
+  );
+  if (!visible || !path) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Path,
+    {
+      path,
+      color,
+      opacity,
+      strokeWidth: width,
+      style: "stroke",
+      strokeCap: cap,
+      strokeJoin: join,
+      children: dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...dash] }) : null
+    }
+  );
+});
+export {
+  Line
+};
+//# sourceMappingURL=line.js.map

package/dist/components/primitives/line.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/line.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { DashPathEffect, Path } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n  LineDefaultCap,\n  LineDefaultColor,\n  LineDefaultCurve,\n  LineDefaultJoin,\n  LineDefaultOpacity,\n  LineDefaultWidth,\n} from \"../../constants\";\nimport { ChartXValue, LineProps } from \"../../types\";\nimport { createLinePath } from \"../../utils\";\n\nexport const Line = memo(function Line<X extends ChartXValue = number>(\n  props: LineProps<X>,\n) {\n  const {\n    cap = LineDefaultCap,\n    color = LineDefaultColor,\n    coordinates,\n    curve = LineDefaultCurve,\n    dash,\n    join = LineDefaultJoin,\n    opacity = LineDefaultOpacity,\n    visible = true,\n    width = LineDefaultWidth,\n  } = props;\n\n  const path = useMemo(\n    () => createLinePath(coordinates, curve),\n    [coordinates, curve],\n  );\n\n  if (!visible || !path) {\n    return null;\n  }\n\n  return (\n    <Path\n      path={path}\n      color={color}\n      opacity={opacity}\n      strokeWidth={width}\n      style=\"stroke\"\n      strokeCap={cap}\n      strokeJoin={join}\n    >\n      {dash?.length ? <DashPathEffect intervals={[...dash]} /> : null}\n    </Path>\n  );\n});\n"],"mappings":"AAkDsB;AAlDtB,SAAS,eAAe;AACxB,SAAS,gBAAgB,YAAY;AAErC,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAExB,MAAM,OAAO,KAAK,SAASA,MAChC,OACA;AACA,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,OAAO;AAAA,IACX,MAAM,eAAe,aAAa,KAAK;AAAA,IACvC,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,MAAI,CAAC,WAAW,CAAC,MAAM;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,OAAM;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,MAEX,gBAAM,SAAS,oBAAC,kBAAe,WAAW,CAAC,GAAG,IAAI,GAAG,IAAK;AAAA;AAAA,EAC7D;AAEJ,CAAC;","names":["Line"]}

package/dist/components/primitives/x-axis.d.mts

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

package/dist/components/primitives/x-axis.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useMemo } from "react";
+import {
+  DashPathEffect,
+  Group,
+  Line as SkiaLine
+} from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import {
+  AxisDefaultLabelGap,
+  AxisDefaultOpacity,
+  AxisDefaultTickLength,
+  AxisDefaultWidth
+} from "../../constants";
+import { createXAxisLayout, formatAxisTick } from "../../utils";
+import { Label } from "./label";
+const XAxis = memo(function XAxis2(props) {
+  const {
+    fontManager,
+    lineVisible = true,
+    options,
+    plot,
+    region,
+    scale,
+    theme,
+    ticks,
+    tickVisible = true
+  } = props;
+  const line = options?.line;
+  const tick = options?.tick;
+  const label = options?.label;
+  const tickLength = tick?.length ?? AxisDefaultTickLength;
+  const labelGap = label?.gap ?? AxisDefaultLabelGap;
+  const fontSize = label?.fontSize ?? theme.fontSize.xs;
+  const layout = useMemo(
+    () => createXAxisLayout({
+      values: ticks,
+      scale,
+      plot,
+      region,
+      tickLength,
+      labelGap
+    }),
+    [labelGap, plot, region, scale, tickLength, ticks]
+  );
+  return /* @__PURE__ */ jsxs(Group, { children: [
+    lineVisible && line?.visible !== false ? /* @__PURE__ */ jsx(
+      SkiaLine,
+      {
+        p1: layout.line.start,
+        p2: layout.line.end,
+        color: line?.color ?? theme.colors.border.default.value,
+        opacity: line?.opacity ?? AxisDefaultOpacity,
+        strokeWidth: line?.width ?? AxisDefaultWidth,
+        children: line?.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...line.dash] }) : null
+      }
+    ) : null,
+    layout.ticks.map((tick2, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      tickVisible && options?.tick?.visible !== false ? /* @__PURE__ */ jsx(
+        SkiaLine,
+        {
+          p1: tick2.start,
+          p2: tick2.end,
+          color: options?.tick?.color ?? theme.colors.border.default.value,
+          opacity: options?.tick?.opacity ?? AxisDefaultOpacity,
+          strokeWidth: options?.tick?.width ?? AxisDefaultWidth,
+          children: options?.tick?.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...options.tick.dash] }) : null
+        }
+      ) : null,
+      label?.visible !== false ? /* @__PURE__ */ jsx(
+        Label,
+        {
+          text: formatAxisTick(tick2.value, options?.format),
+          rect: tick2.labelRect,
+          horizontalAlign: "center",
+          color: label?.color,
+          fontSize,
+          fontFamily: label?.fontFamily,
+          fontWeight: label?.fontWeight,
+          fontManager,
+          maxLines: label?.maxLines,
+          rotation: label?.rotation,
+          theme,
+          tnum: typeof tick2.value === "number"
+        }
+      ) : null
+    ] }, `${String(tick2.value)}-${index}`))
+  ] });
+});
+export {
+  XAxis
+};
+//# sourceMappingURL=x-axis.js.map

package/dist/components/primitives/x-axis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/x-axis.tsx"],"sourcesContent":["import { Fragment, useMemo } from \"react\";\nimport {\n  DashPathEffect,\n  Group,\n  Line as SkiaLine,\n} from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n  AxisDefaultLabelGap,\n  AxisDefaultOpacity,\n  AxisDefaultTickLength,\n  AxisDefaultWidth,\n} from \"../../constants\";\nimport { ChartXValue, XAxisProps } from \"../../types\";\nimport { createXAxisLayout, formatAxisTick } from \"../../utils\";\nimport { Label } from \"./label\";\n\nexport const XAxis = memo(function XAxis<X extends ChartXValue = number>(\n  props: XAxisProps<X>,\n) {\n  const {\n    fontManager,\n    lineVisible = true,\n    options,\n    plot,\n    region,\n    scale,\n    theme,\n    ticks,\n    tickVisible = true,\n  } = props;\n\n  const line = options?.line;\n  const tick = options?.tick;\n  const label = options?.label;\n  const tickLength = tick?.length ?? AxisDefaultTickLength;\n  const labelGap = label?.gap ?? AxisDefaultLabelGap;\n  const fontSize = label?.fontSize ?? theme.fontSize.xs;\n\n  const layout = useMemo(\n    () =>\n      createXAxisLayout({\n        values: ticks,\n        scale,\n        plot,\n        region,\n        tickLength,\n        labelGap,\n      }),\n    [labelGap, plot, region, scale, tickLength, ticks],\n  );\n\n  return (\n    <Group>\n      {lineVisible && line?.visible !== false ? (\n        <SkiaLine\n          p1={layout.line.start}\n          p2={layout.line.end}\n          color={line?.color ?? theme.colors.border.default.value}\n          opacity={line?.opacity ?? AxisDefaultOpacity}\n          strokeWidth={line?.width ?? AxisDefaultWidth}\n        >\n          {line?.dash?.length ? (\n            <DashPathEffect intervals={[...line.dash]} />\n          ) : null}\n        </SkiaLine>\n      ) : null}\n\n      {layout.ticks.map((tick, index) => (\n        <Fragment key={`${String(tick.value)}-${index}`}>\n          {tickVisible && options?.tick?.visible !== false ? (\n            <SkiaLine\n              p1={tick.start}\n              p2={tick.end}\n              color={options?.tick?.color ?? theme.colors.border.default.value}\n              opacity={options?.tick?.opacity ?? AxisDefaultOpacity}\n              strokeWidth={options?.tick?.width ?? AxisDefaultWidth}\n            >\n              {options?.tick?.dash?.length ? (\n                <DashPathEffect intervals={[...options.tick.dash]} />\n              ) : null}\n            </SkiaLine>\n          ) : null}\n          {label?.visible !== false ? (\n            <Label\n              text={formatAxisTick(tick.value, options?.format)}\n              rect={tick.labelRect}\n              horizontalAlign=\"center\"\n              color={label?.color}\n              fontSize={fontSize}\n              fontFamily={label?.fontFamily}\n              fontWeight={label?.fontWeight}\n              fontManager={fontManager}\n              maxLines={label?.maxLines}\n              rotation={label?.rotation}\n              theme={theme}\n              tnum={typeof tick.value === \"number\"}\n            />\n          ) : null}\n        </Fragment>\n      ))}\n    </Group>\n  );\n});\n"],"mappings":"AAiEY,cAMJ,YANI;AAjEZ,SAAS,UAAU,eAAe;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,OACH;AAEP,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,aAAa;AAEf,MAAM,QAAQ,KAAK,SAASA,OACjC,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI;AAEJ,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,MAAM,UAAU;AACnC,QAAM,WAAW,OAAO,OAAO;AAC/B,QAAM,WAAW,OAAO,YAAY,MAAM,SAAS;AAEnD,QAAM,SAAS;AAAA,IACb,MACE,kBAAkB;AAAA,MAChB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,UAAU,MAAM,QAAQ,OAAO,YAAY,KAAK;AAAA,EACnD;AAEA,SACE,qBAAC,SACE;AAAA,mBAAe,MAAM,YAAY,QAChC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,OAAO,KAAK;AAAA,QAChB,IAAI,OAAO,KAAK;AAAA,QAChB,OAAO,MAAM,SAAS,MAAM,OAAO,OAAO,QAAQ;AAAA,QAClD,SAAS,MAAM,WAAW;AAAA,QAC1B,aAAa,MAAM,SAAS;AAAA,QAE3B,gBAAM,MAAM,SACX,oBAAC,kBAAe,WAAW,CAAC,GAAG,KAAK,IAAI,GAAG,IACzC;AAAA;AAAA,IACN,IACE;AAAA,IAEH,OAAO,MAAM,IAAI,CAACC,OAAM,UACvB,qBAAC,YACE;AAAA,qBAAe,SAAS,MAAM,YAAY,QACzC;AAAA,QAAC;AAAA;AAAA,UACC,IAAIA,MAAK;AAAA,UACT,IAAIA,MAAK;AAAA,UACT,OAAO,SAAS,MAAM,SAAS,MAAM,OAAO,OAAO,QAAQ;AAAA,UAC3D,SAAS,SAAS,MAAM,WAAW;AAAA,UACnC,aAAa,SAAS,MAAM,SAAS;AAAA,UAEpC,mBAAS,MAAM,MAAM,SACpB,oBAAC,kBAAe,WAAW,CAAC,GAAG,QAAQ,KAAK,IAAI,GAAG,IACjD;AAAA;AAAA,MACN,IACE;AAAA,MACH,OAAO,YAAY,QAClB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,eAAeA,MAAK,OAAO,SAAS,MAAM;AAAA,UAChD,MAAMA,MAAK;AAAA,UACX,iBAAgB;AAAA,UAChB,OAAO,OAAO;AAAA,UACd;AAAA,UACA,YAAY,OAAO;AAAA,UACnB,YAAY,OAAO;AAAA,UACnB;AAAA,UACA,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB;AAAA,UACA,MAAM,OAAOA,MAAK,UAAU;AAAA;AAAA,MAC9B,IACE;AAAA,SA7BS,GAAG,OAAOA,MAAK,KAAK,CAAC,IAAI,KAAK,EA8B7C,CACD;AAAA,KACH;AAEJ,CAAC;","names":["XAxis","tick"]}

package/dist/components/primitives/y-axis.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { YAxisProps } from '../../types/axis.types.mjs';
+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';
+
+declare const YAxis: (props: YAxisProps) => react_jsx_runtime.JSX.Element;
+
+export { YAxis };