@mittwald/flow-react-components 0.2.0-alpha.5 → 0.2.0-alpha.500

package/dist/js/components/src/components/Button/Button.module.scss.mjs

@@ -0,0 +1,52 @@
+"use client"
+/* */
+const button = "flow--button";
+const outline = "flow--button--outline";
+const content = "flow--button--content";
+const stateIcon = "flow--button--state-icon";
+const icon = "flow--button--icon";
+const text = "flow--button--text";
+const counterBadge = "flow--button--counter-badge";
+const isPending = "flow--button--is-pending";
+const isFailed = "flow--button--is-failed";
+const isSucceeded = "flow--button--is-succeeded";
+const plain = "flow--button--plain";
+const image = "flow--button--image";
+const primary = "flow--button--primary";
+const solid = "flow--button--solid";
+const ariaDisabled = "flow--button--aria-disabled";
+const accent = "flow--button--accent";
+const danger = "flow--button--danger";
+const secondary = "flow--button--secondary";
+const dark = "flow--button--dark";
+const light = "flow--button--light";
+const soft = "flow--button--soft";
+const avatar = "flow--button--avatar";
+const styles = {
+	button: button,
+	outline: outline,
+	content: content,
+	stateIcon: stateIcon,
+	icon: icon,
+	text: text,
+	counterBadge: counterBadge,
+	isPending: isPending,
+	isFailed: isFailed,
+	isSucceeded: isSucceeded,
+	plain: plain,
+	"size-s": "flow--button--size-s",
+	image: image,
+	primary: primary,
+	solid: solid,
+	ariaDisabled: ariaDisabled,
+	accent: accent,
+	danger: danger,
+	secondary: secondary,
+	dark: dark,
+	light: light,
+	soft: soft,
+	avatar: avatar
+};
+
+export { accent, ariaDisabled, avatar, button, content, counterBadge, danger, dark, styles as default, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, text };
+//# sourceMappingURL=Button.module.scss.mjs.map

package/dist/js/components/src/components/Button/Button.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/Calendar/Calendar.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import styles from './Calendar.module.scss.mjs';
+import { CalendarHeader } from './components/CalendarHeader/CalendarHeader.mjs';
+
+const Calendar = () => {
+  return /* @__PURE__ */ jsxs(Aria.Calendar, { className: styles.calendar, children: [
+    /* @__PURE__ */ jsx(CalendarHeader, {}),
+    /* @__PURE__ */ jsx(Aria.CalendarGrid, { weekdayStyle: "short", children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })
+  ] });
+};
+
+export { Calendar, Calendar as default };
+//# sourceMappingURL=Calendar.mjs.map

package/dist/js/components/src/components/Calendar/Calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","sources":["../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\n\nexport const Calendar: FC = () => {\n  return (\n    <Aria.Calendar className={styles.calendar}>\n      <CalendarHeader />\n      <Aria.CalendarGrid weekdayStyle=\"short\">\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.Calendar>\n  );\n};\n\nexport default Calendar;\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,WAAe,MAAM;AAChC,EAAA,4BACG,IAAK,CAAA,QAAA,EAAL,EAAc,SAAA,EAAW,OAAO,QAC/B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,CAAA;AAAA,oBACf,GAAA,CAAA,IAAA,CAAK,YAAL,EAAA,EAAkB,YAAa,EAAA,OAAA,EAC7B,QAAC,EAAA,CAAA,IAAA,qBAAU,GAAA,CAAA,IAAA,CAAK,YAAL,EAAA,EAAkB,MAAY,CAC5C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Calendar/Calendar.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const calendar = "flow--calendar";
+const range = "flow--calendar--range";
+const styles = {
+	calendar: calendar,
+	range: range
+};
+
+export { calendar, styles as default, range };
+//# sourceMappingURL=Calendar.module.scss.mjs.map

package/dist/js/components/src/components/Calendar/Calendar.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/js/components/src/components/Calendar/RangeCalendar.mjs

@@ -0,0 +1,18 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import styles from './Calendar.module.scss.mjs';
+import { CalendarHeader } from './components/CalendarHeader/CalendarHeader.mjs';
+import clsx from 'clsx';
+
+const RangeCalendar = () => {
+  return /* @__PURE__ */ jsxs(Aria.RangeCalendar, { className: clsx(styles.calendar, styles.range), children: [
+    /* @__PURE__ */ jsx(CalendarHeader, {}),
+    /* @__PURE__ */ jsx(Aria.CalendarGrid, { children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })
+  ] });
+};
+
+export { RangeCalendar, RangeCalendar as default };
+//# sourceMappingURL=RangeCalendar.mjs.map

package/dist/js/components/src/components/Calendar/RangeCalendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar.mjs","sources":["../../../../../../src/components/Calendar/RangeCalendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport clsx from \"clsx\";\n\nexport const RangeCalendar: FC = () => {\n  return (\n    <Aria.RangeCalendar className={clsx(styles.calendar, styles.range)}>\n      <CalendarHeader />\n      <Aria.CalendarGrid>\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.RangeCalendar>\n  );\n};\n\nexport default RangeCalendar;\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,gBAAoB,MAAM;AACrC,EACE,uBAAA,IAAA,CAAC,IAAK,CAAA,aAAA,EAAL,EAAmB,SAAA,EAAW,KAAK,MAAO,CAAA,QAAA,EAAU,MAAO,CAAA,KAAK,CAC/D,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,CAAA;AAAA,oBAChB,GAAA,CAAC,IAAK,CAAA,YAAA,EAAL,EACE,QAAA,EAAA,CAAC,IAAS,qBAAA,GAAA,CAAC,IAAK,CAAA,YAAA,EAAL,EAAkB,IAAA,EAAY,CAC5C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs

@@ -0,0 +1,22 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../../Button/Button.mjs';
+import * as Aria from 'react-aria-components';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconChevronLeft } from '../../../Icon/components/icons/IconChevronLeft.mjs';
+import { IconChevronRight } from '../../../Icon/components/icons/IconChevronRight.mjs';
+
+const CalendarHeader = () => {
+  return /* @__PURE__ */ jsxs("header", { children: [
+    /* @__PURE__ */ jsx(Button, { ariaSlot: "previous", variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
+    /* @__PURE__ */ jsx(Aria.Heading, {}),
+    /* @__PURE__ */ jsx(Button, { ariaSlot: "next", variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
+  ] });
+};
+
+export { CalendarHeader, CalendarHeader as default };
+//# sourceMappingURL=CalendarHeader.mjs.map

package/dist/js/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.mjs","sources":["../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"names":[],"mappings":";;;;;;;;;;AASO,MAAM,iBAAqB,MAAM;AACtC,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,UAAS,UAAW,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,WAAA,EAChD,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA,EAAgB,CACnB,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,IAAK,CAAA,OAAA,EAAL,EAAa,CAAA;AAAA,oBACd,GAAA,CAAC,MAAO,EAAA,EAAA,QAAA,EAAS,MAAO,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,WAAA,EAC5C,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,CACpB,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/CartesianChart.mjs

@@ -0,0 +1,94 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import { Children, cloneElement, useRef, useState, useEffect } from 'react';
+import { Area } from './components/Area/Area.mjs';
+import clsx from 'clsx';
+import styles from './CartesianChart.module.scss.mjs';
+import { Wrap } from '../Wrap/Wrap.mjs';
+import { CartesianGrid } from './components/CartesianGrid/CartesianGrid.mjs';
+
+const CartesianChart = (props) => {
+  const {
+    children,
+    data,
+    className,
+    height,
+    flexGrow,
+    emptyView: EmptyView,
+    ...rest
+  } = props;
+  const rootClassName = clsx(styles.cartesianChart, className);
+  const areasWithoutDots = [];
+  const areasWithDots = [];
+  const otherChildren = [];
+  const gridChildren = [];
+  Children.forEach(children, (child, index) => {
+    if (!child) return;
+    const element = child;
+    if (element.type === CartesianGrid) {
+      gridChildren.push(element);
+    } else if (element.type === Area) {
+      areasWithoutDots.push(
+        cloneElement(element, {
+          onlyDots: false,
+          key: `area-${index}`
+        })
+      );
+      areasWithDots.push(
+        cloneElement(element, {
+          onlyDots: true,
+          key: `area-dots-${index}`
+        })
+      );
+    } else {
+      otherChildren.push(element);
+    }
+  });
+  const showEmptyView = (!data || data.length === 0) && EmptyView;
+  const chartContainerRef = useRef(null);
+  const [viewDimensions, setViewDimensions] = useState(null);
+  useEffect(() => {
+    if (showEmptyView) {
+      const updateDimensions = () => {
+        const svg = chartContainerRef.current?.querySelector(
+          "svg"
+        );
+        if (!svg) return;
+        const clip = svg.querySelector("clipPath rect");
+        if (clip) {
+          const x = parseFloat(clip.getAttribute("x") ?? "0");
+          const y = parseFloat(clip.getAttribute("y") ?? "0");
+          const width = parseFloat(clip.getAttribute("width") ?? "0");
+          const height2 = parseFloat(clip.getAttribute("height") ?? "0");
+          setViewDimensions({ x, y, width, height: height2 });
+        }
+      };
+      updateDimensions();
+      const container = chartContainerRef.current;
+      const observer = new ResizeObserver(updateDimensions);
+      if (container) observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(Wrap, { if: height, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height, flex: flexGrow ? 1 : void 0 },
+      ref: chartContainerRef,
+      children: /* @__PURE__ */ jsx(Recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxs(Recharts.AreaChart, { data, className: rootClassName, ...rest, children: [
+        !showEmptyView && gridChildren,
+        areasWithoutDots,
+        otherChildren,
+        areasWithDots,
+        showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx("div", { className: styles.emptyViewContainer, children: /* @__PURE__ */ jsx(EmptyView, { data }) }) })
+      ] }) })
+    }
+  ) });
+};
+
+export { CartesianChart, CartesianChart as default };
+//# sourceMappingURL=CartesianChart.mjs.map

package/dist/js/components/src/components/CartesianChart/CartesianChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport type { CategoricalChartProps } from \"recharts/types/chart/generateCategoricalChart\";\nimport React, {\n  Children,\n  cloneElement,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n  type ReactElement,\n  type SVGProps,\n} from \"react\";\nimport { Area, type AreaProps } from \"./components/Area\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"@/components/CartesianChart/components/CartesianGrid\";\n\nexport interface CartesianChartEmptyViewProps {\n  data?: CategoricalChartProps[\"data\"];\n}\n\nexport interface CartesianChartProps\n  extends Pick<\n      CategoricalChartProps,\n      \"data\" | \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  height?: string;\n  /** View that is provided when data is empty/undefined */\n  emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView: EmptyView,\n    ...rest\n  } = props;\n  const rootClassName = clsx(styles.cartesianChart, className);\n\n  // render order: grid, areas without dots, other children, areas with dots\n  // this is needed to ensure that the dots will always overlay the areas\n  const areasWithoutDots: ReactElement[] = [];\n  const areasWithDots: ReactElement[] = [];\n  const otherChildren: ReactElement[] = [];\n  const gridChildren: ReactElement[] = [];\n\n  Children.forEach(children, (child, index) => {\n    if (!child) return;\n    const element = child as ReactElement;\n\n    if (element.type === CartesianGrid) {\n      gridChildren.push(element);\n    } else if (element.type === Area) {\n      areasWithoutDots.push(\n        cloneElement(element as ReactElement<AreaProps>, {\n          onlyDots: false,\n          key: `area-${index}`,\n        }),\n      );\n      areasWithDots.push(\n        cloneElement(element as ReactElement<AreaProps>, {\n          onlyDots: true,\n          key: `area-dots-${index}`,\n        }),\n      );\n    } else {\n      otherChildren.push(element);\n    }\n  });\n\n  const showEmptyView = (!data || data.length === 0) && EmptyView;\n\n  const chartContainerRef = useRef<HTMLDivElement>(null);\n  const [viewDimensions, setViewDimensions] = useState<Partial<\n    SVGProps<SVGForeignObjectElement>\n  > | null>(null);\n\n  // resizing the foreignObject for the EmptyView on size changes\n  useEffect(() => {\n    if (showEmptyView) {\n      const updateDimensions = () => {\n        const svg = chartContainerRef.current?.querySelector(\n          \"svg\",\n        ) as SVGSVGElement | null;\n        if (!svg) return;\n\n        const clip = svg.querySelector(\"clipPath rect\");\n        if (clip) {\n          const x = parseFloat(clip.getAttribute(\"x\") ?? \"0\");\n          const y = parseFloat(clip.getAttribute(\"y\") ?? \"0\");\n          const width = parseFloat(clip.getAttribute(\"width\") ?? \"0\");\n          const height = parseFloat(clip.getAttribute(\"height\") ?? \"0\");\n          setViewDimensions({ x, y, width, height });\n        }\n      };\n\n      updateDimensions();\n\n      const container = chartContainerRef.current;\n      const observer = new ResizeObserver(updateDimensions);\n      if (container) observer.observe(container);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, []);\n\n  return (\n    <Wrap if={height}>\n      <div\n        style={{ height, flex: flexGrow ? 1 : undefined }}\n        ref={chartContainerRef}\n      >\n        <Recharts.ResponsiveContainer>\n          <Recharts.AreaChart data={data} className={rootClassName} {...rest}>\n            {!showEmptyView && gridChildren}\n            {areasWithoutDots}\n            {otherChildren}\n            {areasWithDots}\n            {showEmptyView && viewDimensions && (\n              <foreignObject {...viewDimensions}>\n                <div className={styles.emptyViewContainer}>\n                  <EmptyView data={data} />\n                </div>\n              </foreignObject>\n            )}\n          </Recharts.AreaChart>\n        </Recharts.ResponsiveContainer>\n      </div>\n    </Wrap>\n  );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":"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"}

package/dist/js/components/src/components/CartesianChart/CartesianChart.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const cartesianChart = "flow--cartesian-chart";
+const emptyViewContainer = "flow--cartesian-chart--empty-view-container";
+const styles = {
+	cartesianChart: cartesianChart,
+	emptyViewContainer: emptyViewContainer
+};
+
+export { cartesianChart, styles as default, emptyViewContainer };
+//# sourceMappingURL=CartesianChart.module.scss.mjs.map

package/dist/js/components/src/components/CartesianChart/CartesianChart.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/js/components/src/components/CartesianChart/components/Area/Area.mjs

@@ -0,0 +1,32 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import { AreaDot } from '../AreaDot/AreaDot.mjs';
+
+const Area = (props) => {
+  const {
+    color = "sea-green",
+    stackId = 1,
+    fillOpacity = 1,
+    onlyDots = true,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.Area,
+    {
+      stackId,
+      fillOpacity,
+      ...rest,
+      activeDot: onlyDots ? /* @__PURE__ */ jsx(AreaDot, { color: `var(--color--categorical--${color})` }) : false,
+      fill: onlyDots ? "none" : `var(--color--categorical--${color})`,
+      stroke: onlyDots ? "none" : tokens.area["border-color"].value,
+      strokeWidth: onlyDots ? void 0 : tokens.area["border-width"].value
+    }
+  );
+};
+
+export { Area, Area as default };
+//# sourceMappingURL=Area.mjs.map

package/dist/js/components/src/components/CartesianChart/components/Area/Area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\n\nexport interface AreaProps\n  extends Pick<\n    Recharts.AreaProps,\n    | \"className\"\n    | \"dataKey\"\n    | \"stackId\"\n    | \"fillOpacity\"\n    | \"key\"\n    | \"xAxisId\"\n    | \"yAxisId\"\n    | \"type\"\n    | \"unit\"\n  > {\n  /** The color of the area. @default \"sea-green\" */\n  color?: CategoricalColor;\n  /** @internal */\n  onlyDots?: boolean;\n}\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color = \"sea-green\",\n    stackId = 1,\n    fillOpacity = 1,\n    onlyDots = true,\n    ...rest\n  } = props;\n\n  return (\n    <Recharts.Area\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={\n        onlyDots ? (\n          <AreaDot color={`var(--color--categorical--${color})`} />\n        ) : (\n          false\n        )\n      }\n      fill={onlyDots ? \"none\" : `var(--color--categorical--${color})`}\n      stroke={onlyDots ? \"none\" : tokens.area[\"border-color\"].value}\n      strokeWidth={onlyDots ? undefined : tokens.area[\"border-width\"].value}\n    />\n  );\n};\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;AA0Ba,MAAA,IAAA,GAAsB,CAAC,KAAU,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,KAAQ,GAAA,WAAA;AAAA,IACR,OAAU,GAAA,CAAA;AAAA,IACV,WAAc,GAAA,CAAA;AAAA,IACd,QAAW,GAAA,IAAA;AAAA,IACX,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA,EACE,2BACG,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,CAA6B,0BAAA,EAAA,KAAK,KAAK,CAEvD,GAAA,KAAA;AAAA,MAGJ,IAAM,EAAA,QAAA,GAAW,MAAS,GAAA,CAAA,0BAAA,EAA6B,KAAK,CAAA,CAAA,CAAA;AAAA,MAC5D,QAAQ,QAAW,GAAA,MAAA,GAAS,MAAO,CAAA,IAAA,CAAK,cAAc,CAAE,CAAA,KAAA;AAAA,MACxD,aAAa,QAAW,GAAA,MAAA,GAAY,MAAO,CAAA,IAAA,CAAK,cAAc,CAAE,CAAA;AAAA;AAAA,GAClE;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs

@@ -0,0 +1,30 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AreaDot = ({
+  cx,
+  cy,
+  color
+}) => {
+  if (cx === void 0 || cy === void 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      x: cx - 7,
+      y: cy - 7,
+      width: 14,
+      height: 14,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "7", fill: "white" }),
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4", stroke: color, strokeWidth: "2", fill: "white" })
+      ]
+    }
+  );
+};
+
+export { AreaDot };
+//# sourceMappingURL=AreaDot.mjs.map

package/dist/js/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaDot.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport const AreaDot: FC<Recharts.DotProps & { color: string }> = ({\n  cx,\n  cy,\n  color,\n}) => {\n  if (cx === undefined || cy === undefined) return null;\n\n  return (\n    <svg\n      x={cx - 7}\n      y={cy - 7}\n      width={14}\n      height={14}\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"7\" fill=\"white\" />\n      <circle cx=\"7\" cy=\"7\" r=\"4\" stroke={color} strokeWidth=\"2\" fill=\"white\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;AAGO,MAAM,UAAqD,CAAC;AAAA,EACjE,EAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,IAAI,EAAO,KAAA,MAAA,IAAa,EAAO,KAAA,MAAA,EAAkB,OAAA,IAAA;AAEjD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAG,EAAK,GAAA,CAAA;AAAA,MACR,GAAG,EAAK,GAAA,CAAA;AAAA,MACR,KAAO,EAAA,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,KAAM,EAAA,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,QAAA,EAAA,EAAO,IAAG,GAAI,EAAA,EAAA,EAAG,KAAI,CAAE,EAAA,GAAA,EAAI,MAAK,OAAQ,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAA,QAAA,EAAA,EAAO,EAAG,EAAA,GAAA,EAAI,EAAG,EAAA,GAAA,EAAI,CAAE,EAAA,GAAA,EAAI,MAAQ,EAAA,KAAA,EAAO,WAAY,EAAA,GAAA,EAAI,MAAK,OAAQ,EAAA;AAAA;AAAA;AAAA,GAC1E;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/CartesianGrid/CartesianGrid.mjs

@@ -0,0 +1,21 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+
+const CartesianGrid = (props) => {
+  const { vertical = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.CartesianGrid,
+    {
+      vertical,
+      ...rest,
+      stroke: tokens["cartesian-grid"].color.value,
+      strokeWidth: tokens["cartesian-grid"]["stroke-width"].value
+    }
+  );
+};
+
+export { CartesianGrid, CartesianGrid as default };
+//# sourceMappingURL=CartesianGrid.mjs.map

package/dist/js/components/src/components/CartesianChart/components/CartesianGrid/CartesianGrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianGrid.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/CartesianGrid/CartesianGrid.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type CartesianGridProps = Pick<\n  Recharts.CartesianGridProps,\n  \"className\" | \"vertical\" | \"horizontal\" | \"strokeDasharray\"\n>;\n\n/** @flr-generate all */\nexport const CartesianGrid: FC<CartesianGridProps> = (props) => {\n  const { vertical = false, ...rest } = props;\n\n  return (\n    <Recharts.CartesianGrid\n      vertical={vertical}\n      {...rest}\n      stroke={tokens[\"cartesian-grid\"].color.value}\n      strokeWidth={tokens[\"cartesian-grid\"][\"stroke-width\"].value}\n    />\n  );\n};\n\nexport default CartesianGrid;\n"],"names":[],"mappings":";;;;AAUa,MAAA,aAAA,GAAwC,CAAC,KAAU,KAAA;AAC9D,EAAA,MAAM,EAAE,QAAA,GAAW,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEtC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,aAAA;AAAA,IAAT;AAAA,MACC,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,MAAQ,EAAA,MAAA,CAAO,gBAAgB,CAAA,CAAE,KAAM,CAAA,KAAA;AAAA,MACvC,WAAa,EAAA,MAAA,CAAO,gBAAgB,CAAA,CAAE,cAAc,CAAE,CAAA;AAAA;AAAA,GACxD;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import LegendContent from './LegendContent.mjs';
+
+const ChartLegend = (props) => {
+  const { formatter, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.Legend,
+    {
+      ...rest,
+      content: /* @__PURE__ */ jsx(LegendContent, { formatter })
+    }
+  );
+};
+
+export { ChartLegend, ChartLegend as default };
+//# sourceMappingURL=ChartLegend.mjs.map

package/dist/js/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport LegendContent from \"./LegendContent\";\n\nexport type ChartLegendFormatter = (text: string) => string;\n\nexport interface WithChartLegendFormatters {\n  /**\n   * A formatter function for the texts of the Legend. Can be used for purposes\n   * like translations.\n   */\n  formatter?: ChartLegendFormatter;\n}\n\nexport type ChartLegendProps = Pick<\n  Recharts.LegendProps,\n  \"className\" | \"verticalAlign\"\n> &\n  WithChartLegendFormatters;\n\n/** @flr-generate all */\nexport const ChartLegend: FC<ChartLegendProps> = (props) => {\n  const { formatter, ...rest } = props;\n\n  return (\n    <Recharts.Legend\n      {...rest}\n      content={<LegendContent formatter={formatter} />}\n    />\n  );\n};\n\nexport default ChartLegend;\n"],"names":[],"mappings":";;;;AAqBa,MAAA,WAAA,GAAoC,CAAC,KAAU,KAAA;AAC1D,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,MAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,kBAAU,GAAA,CAAA,aAAA,EAAA,EAAc,SAAsB,EAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/ChartLegend/LegendContent.mjs

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { Legend } from '../../../Legend/Legend.mjs';
+import { LegendItem } from '../../../Legend/components/LegendItem/LegendItem.mjs';
+
+const LegendContent = (props) => {
+  const { formatter, payload } = props;
+  return /* @__PURE__ */ jsx(Legend, { children: payload?.filter(
+    (entry) => entry.payload && "fill" in entry.payload && entry.payload?.fill !== "none"
+  ).map((entry, index) => {
+    return /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        color: entry.payload && "fill" in entry.payload && typeof entry.payload.fill === "string" ? entry.payload?.fill.replace("var(--color--categorical--", "").replace(")", "") : void 0,
+        children: entry.dataKey ? formatter ? formatter(entry.dataKey?.toString()) : entry.dataKey.toString() : ""
+      },
+      `legendItem-${index}`
+    );
+  }) });
+};
+
+export { LegendContent as default };
+//# sourceMappingURL=LegendContent.mjs.map

package/dist/js/components/src/components/CartesianChart/components/ChartLegend/LegendContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartLegend/LegendContent.tsx"],"sourcesContent":["import type { Props } from \"recharts/types/component/DefaultLegendContent\";\nimport type { WithChartLegendFormatters } from \"./ChartLegend\";\nimport type { FC } from \"react\";\nimport Legend, { LegendItem } from \"@/components/Legend\";\nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\n\ntype LegendContentType = Omit<Props, \"formatter\"> & WithChartLegendFormatters;\n\nconst LegendContent: FC<LegendContentType> = (props) => {\n  const { formatter, payload } = props;\n\n  return (\n    <Legend>\n      {payload\n        ?.filter(\n          (entry) =>\n            entry.payload &&\n            \"fill\" in entry.payload &&\n            entry.payload?.fill !== \"none\",\n        )\n        .map((entry, index) => {\n          return (\n            <LegendItem\n              key={`legendItem-${index}`}\n              color={\n                entry.payload &&\n                \"fill\" in entry.payload &&\n                typeof entry.payload.fill === \"string\"\n                  ? (entry.payload?.fill\n                      .replace(\"var(--color--categorical--\", \"\")\n                      .replace(\")\", \"\") as CategoricalColor)\n                  : undefined\n              }\n            >\n              {entry.dataKey\n                ? formatter\n                  ? formatter(entry.dataKey?.toString())\n                  : entry.dataKey.toString()\n                : \"\"}\n            </LegendItem>\n          );\n        })}\n    </Legend>\n  );\n};\n\nexport default LegendContent;\n"],"names":[],"mappings":";;;;AAQM,MAAA,aAAA,GAAuC,CAAC,KAAU,KAAA;AACtD,EAAM,MAAA,EAAE,SAAW,EAAA,OAAA,EAAY,GAAA,KAAA;AAE/B,EACE,uBAAA,GAAA,CAAC,UACE,QACG,EAAA,OAAA,EAAA,MAAA;AAAA,IACA,CAAC,UACC,KAAM,CAAA,OAAA,IACN,UAAU,KAAM,CAAA,OAAA,IAChB,KAAM,CAAA,OAAA,EAAS,IAAS,KAAA;AAAA,GAE3B,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AACrB,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,KAAA,EACE,MAAM,OACN,IAAA,MAAA,IAAU,MAAM,OAChB,IAAA,OAAO,MAAM,OAAQ,CAAA,IAAA,KAAS,WACzB,KAAM,CAAA,OAAA,EAAS,KACb,OAAQ,CAAA,4BAAA,EAA8B,EAAE,CACxC,CAAA,OAAA,CAAQ,GAAK,EAAA,EAAE,CAClB,GAAA,MAAA;AAAA,QAGL,QAAM,EAAA,KAAA,CAAA,OAAA,GACH,SACE,GAAA,SAAA,CAAU,KAAM,CAAA,OAAA,EAAS,QAAS,EAAC,CACnC,GAAA,KAAA,CAAM,OAAQ,CAAA,QAAA,EAChB,GAAA;AAAA,OAAA;AAAA,MAfC,cAAc,KAAK,CAAA;AAAA,KAgB1B;AAAA,GAEH,CACL,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs

@@ -0,0 +1,34 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import { TooltipContent } from './TooltipContent.mjs';
+
+const ChartTooltip = (props) => {
+  const { formatter, headingFormatter, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.Tooltip,
+    {
+      ...rest,
+      content: (props2) => {
+        const {
+          formatter: ignoredFormatter,
+          labelFormatter: ignoredLabelFormatter,
+          ...rest2
+        } = props2;
+        return /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            formatter,
+            headingFormatter,
+            ...rest2
+          }
+        );
+      },
+      cursor: false
+    }
+  );
+};
+
+export { ChartTooltip, ChartTooltip as default };
+//# sourceMappingURL=ChartTooltip.mjs.map

package/dist/js/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"./TooltipContent\";\n\nexport type TooltipLineFormatter = (\n  value: ValueType,\n  name: NameType,\n  index: number,\n  unit?: string | number,\n) => string;\n\nexport type TooltipHeadingFormatter = (\n  title: string | number | undefined,\n) => string;\n\nexport interface WithTooltipFormatters {\n  /**\n   * A formatter function for the lines in the tooltip. Can be used for purposes\n   * like translations.\n   */\n  formatter?: TooltipLineFormatter;\n  /**\n   * A formatter function for the heading of the tooltip. Can be used for\n   * purposes like translations.\n   */\n  headingFormatter?: TooltipHeadingFormatter;\n}\n\nexport interface ChartTooltipProps\n  extends Pick<\n      Recharts.TooltipProps<ValueType, NameType>,\n      \"wrapperClassName\" | \"allowEscapeViewBox\"\n    >,\n    WithTooltipFormatters {}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n  const { formatter, headingFormatter, ...rest } = props;\n  return (\n    <Recharts.Tooltip\n      {...rest}\n      content={(props) => {\n        const {\n          formatter: ignoredFormatter,\n          labelFormatter: ignoredLabelFormatter,\n          ...rest\n        } = props;\n\n        return (\n          <TooltipContent\n            formatter={formatter}\n            headingFormatter={headingFormatter}\n            {...rest}\n          />\n        );\n      }}\n      cursor={false}\n    />\n  );\n};\n\nexport default ChartTooltip;\n"],"names":["props","rest"],"mappings":";;;;AAwCa,MAAA,YAAA,GAAsC,CAAC,KAAU,KAAA;AAC5D,EAAA,MAAM,EAAE,SAAA,EAAW,gBAAkB,EAAA,GAAG,MAAS,GAAA,KAAA;AACjD,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,OAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,EAAS,CAACA,MAAU,KAAA;AAClB,QAAM,MAAA;AAAA,UACJ,SAAW,EAAA,gBAAA;AAAA,UACX,cAAgB,EAAA,qBAAA;AAAA,UAChB,GAAGC;AAAA,SACDD,GAAAA,MAAAA;AAEJ,QACE,uBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,SAAA;AAAA,YACA,gBAAA;AAAA,YACC,GAAGC;AAAA;AAAA,SACN;AAAA,OAEJ;AAAA,MACA,MAAQ,EAAA;AAAA;AAAA,GACV;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const tooltip = "flow--cartesian-chart--chart-tooltip--tooltip";
+const styles = {
+	tooltip: tooltip
+};
+
+export { styles as default, tooltip };
+//# sourceMappingURL=ChartTooltip.module.scss.mjs.map

package/dist/js/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/js/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs

@@ -0,0 +1,36 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Heading } from '../../../Heading/Heading.mjs';
+import { LegendItem } from '../../../Legend/components/LegendItem/LegendItem.mjs';
+import styles from './ChartTooltip.module.scss.mjs';
+
+const TooltipContent = (props) => {
+  const {
+    active,
+    payload,
+    formatter,
+    headingFormatter,
+    label,
+    wrapperClassName
+  } = props;
+  const className = clsx(wrapperClassName, styles.tooltip);
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      /* @__PURE__ */ jsx(Heading, { level: 4, children: headingFormatter ? headingFormatter(label) : label }),
+      payload.filter((i) => i.fill !== "none").map((i, index) => /* @__PURE__ */ jsx(
+        LegendItem,
+        {
+          color: i.fill.replace("var(--color--categorical--", "").replace(")", ""),
+          children: formatter ? formatter(i.value, i.dataKey, index, i.unit) : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : ""}`
+        },
+        i.dataKey
+      ))
+    ] });
+  }
+  return null;
+};
+
+export { TooltipContent };
+//# sourceMappingURL=TooltipContent.mjs.map

package/dist/js/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport Heading from \"@/components/Heading\";\nimport { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type * as Recharts from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport styles from \"./ChartTooltip.module.scss\";\n\ninterface TooltipContentProps\n  extends Pick<\n      Recharts.TooltipContentProps<ValueType, NameType>,\n      \"active\" | \"payload\" | \"label\" | \"wrapperClassName\"\n    >,\n    WithTooltipFormatters {}\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n  const {\n    active,\n    payload,\n    formatter,\n    headingFormatter,\n    label,\n    wrapperClassName,\n  } = props;\n  const className = clsx(wrapperClassName, styles.tooltip);\n\n  if (active && payload && payload.length) {\n    return (\n      <div className={className}>\n        <Heading level={4}>\n          {headingFormatter ? headingFormatter(label) : label}\n        </Heading>\n        {payload\n          .filter((i) => i.fill !== \"none\")\n          .map((i, index) => (\n            <LegendItem\n              color={i.fill\n                .replace(\"var(--color--categorical--\", \"\")\n                .replace(\")\", \"\")}\n              key={i.dataKey}\n            >\n              {formatter\n                ? formatter(i.value, i.dataKey, index, i.unit)\n                : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : \"\"}`}\n            </LegendItem>\n          ))}\n      </div>\n    );\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;AAkBa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,gBAAkB,EAAA,MAAA,CAAO,OAAO,CAAA;AAEvD,EAAI,IAAA,MAAA,IAAU,OAAW,IAAA,OAAA,CAAQ,MAAQ,EAAA;AACvC,IACE,uBAAA,IAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,CAAA,EACb,6BAAmB,gBAAiB,CAAA,KAAK,IAAI,KAChD,EAAA,CAAA;AAAA,MACC,OAAA,CACE,MAAO,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,IAAS,KAAA,MAAM,CAC/B,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,KACP,qBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,EAAE,IACN,CAAA,OAAA,CAAQ,8BAA8B,EAAE,CAAA,CACxC,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAA;AAAA,UAGjB,QAAA,EAAA,SAAA,GACG,UAAU,CAAE,CAAA,KAAA,EAAO,EAAE,OAAS,EAAA,KAAA,EAAO,CAAE,CAAA,IAAI,CAC3C,GAAA,CAAA,EAAG,EAAE,OAAO,CAAA,EAAA,EAAK,CAAE,CAAA,KAAK,CAAI,CAAA,EAAA,CAAA,CAAE,OAAO,CAAI,CAAA,EAAA,CAAA,CAAE,IAAI,CAAA,CAAA,GAAK,EAAE,CAAA;AAAA,SAAA;AAAA,QAJrD,CAAE,CAAA;AAAA,OAMV;AAAA,KACL,EAAA,CAAA;AAAA;AAIJ,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist/js/components/src/components/CartesianChart/components/Line/Line.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import { AreaDot } from '../AreaDot/AreaDot.mjs';
+
+const Line = (props) => {
+  const { color = "sea-green", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.Line,
+    {
+      ...rest,
+      fill: `var(--color--categorical--${color})`,
+      activeDot: /* @__PURE__ */ jsx(AreaDot, { color: `var(--color--categorical--${color})` }),
+      dot: false,
+      stroke: `var(--color--categorical--${color})`,
+      strokeWidth: tokens.line["border-width"].value
+    }
+  );
+};
+
+export { Line, Line as default };
+//# sourceMappingURL=Line.mjs.map

package/dist/js/components/src/components/CartesianChart/components/Line/Line.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\n\nexport interface LineProps\n  extends Pick<\n    Recharts.LineProps,\n    \"className\" | \"dataKey\" | \"key\" | \"xAxisId\" | \"yAxisId\" | \"type\" | \"unit\"\n  > {\n  /** The color of the line. @default \"sea-green\" */\n  color?: CategoricalColor;\n}\n\n/** @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n  const { color = \"sea-green\", ...rest } = props;\n\n  return (\n    <Recharts.Line\n      {...rest}\n      fill={`var(--color--categorical--${color})`}\n      activeDot={<AreaDot color={`var(--color--categorical--${color})`} />}\n      dot={false}\n      stroke={`var(--color--categorical--${color})`}\n      strokeWidth={tokens.line[\"border-width\"].value}\n    />\n  );\n};\n\nexport default Line;\n"],"names":[],"mappings":";;;;;;AAgBa,MAAA,IAAA,GAAsB,CAAC,KAAU,KAAA;AAC5C,EAAA,MAAM,EAAE,KAAA,GAAQ,WAAa,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,IAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,IAAA,EAAM,6BAA6B,KAAK,CAAA,CAAA,CAAA;AAAA,MACxC,2BAAY,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,0BAAA,EAA6B,KAAK,CAAK,CAAA,CAAA,EAAA,CAAA;AAAA,MAClE,GAAK,EAAA,KAAA;AAAA,MACL,MAAA,EAAQ,6BAA6B,KAAK,CAAA,CAAA,CAAA;AAAA,MAC1C,WAAa,EAAA,MAAA,CAAO,IAAK,CAAA,cAAc,CAAE,CAAA;AAAA;AAAA,GAC3C;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/components/XAxis/XAxis.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+
+const XAxis = (props) => {
+  return /* @__PURE__ */ jsx(
+    Recharts.XAxis,
+    {
+      ...props,
+      fontSize: tokens.axis["font-size"].value,
+      tick: {
+        fill: tokens.axis["text-color"].value
+      },
+      tickMargin: parseInt(tokens.axis.spacing.value),
+      tickSize: parseInt(tokens.axis["tick-size"].value)
+    }
+  );
+};
+
+export { XAxis, XAxis as default };
+//# sourceMappingURL=XAxis.mjs.map

package/dist/js/components/src/components/CartesianChart/components/XAxis/XAxis.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"XAxis.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type XAxisProps = Pick<\n  Recharts.XAxisProps,\n  | \"className\"\n  | \"dataKey\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"allowDataOverflow\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n  | \"tickFormatter\"\n>;\n\n/** @flr-generate all */\nexport const XAxis: FC<XAxisProps> = (props) => {\n  return (\n    <Recharts.XAxis\n      {...props}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"text-color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport default XAxis;\n"],"names":[],"mappings":";;;;AAsBa,MAAA,KAAA,GAAwB,CAAC,KAAU,KAAA;AAC9C,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAU,EAAA,MAAA,CAAO,IAAK,CAAA,WAAW,CAAE,CAAA,KAAA;AAAA,MACnC,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA;AAAA,OAClC;AAAA,MACA,UAAY,EAAA,QAAA,CAAS,MAAO,CAAA,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAS,CAAA,MAAA,CAAO,IAAK,CAAA,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}