@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/carousel.js","../src/components/layout/Carousel.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/carousel.js","sourcesContent":[null,"import { Key, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\nimport { alpha } from '@mui/material/styles';\nimport type { SxProps, Theme } from '@mui/material/styles';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport Autoplay from 'embla-carousel-autoplay';\nimport type { EmblaOptionsType } from 'embla-carousel';\n\nexport interface CarouselProps<T> {\n  /** Slide data. Each entry is passed to `renderSlide`. */\n  slides: T[];\n  /** Render function for an individual slide. */\n  renderSlide: (item: T, index: number) => ReactNode;\n  /**\n   * Stable per-slide React key. Always set this when `slides` can be reordered\n   * or filtered; otherwise React will reuse the wrong slide's internal state\n   * across renders. Defaults to the slide's array index when omitted.\n   */\n  getKey?: (item: T, index: number) => Key;\n  /** Slides visible in the viewport. @default 1 */\n  slidesPerView?: number;\n  /** Auto-advance every `autoplayDelayMs` while not hovered. @default true */\n  autoplay?: boolean;\n  /** Autoplay tick in milliseconds. @default 5000 */\n  autoplayDelayMs?: number;\n  /** Show dot indicators when more than one slide. @default true */\n  showDots?: boolean;\n  /** Show the `01 / 03`-style counter when more than one slide. @default true */\n  showCounter?: boolean;\n  /** Show prev/next chevrons when more than one slide. @default true */\n  showArrows?: boolean;\n  /** Pause autoplay while the pointer is over the carousel. @default true */\n  pauseOnHover?: boolean;\n  /** Accessible label for the surrounding region. */\n  ariaLabel?: string;\n  /** Fires with the new index whenever embla selects a slide. */\n  onSelect?: (index: number) => void;\n  /** Override the IconButton sx for the prev/next arrows. */\n  arrowSx?: SxProps<Theme>;\n  /** Override the dot color (inactive). Accepts any CSS color string. */\n  dotColor?: string;\n  /** Override the active dot color. Accepts any CSS color string. */\n  dotActiveColor?: string;\n  /** Escape hatch for advanced embla options. Most consumers don't need this. */\n  emblaOptions?: EmblaOptionsType;\n}\n\nconst pad2 = (n: number) => String(n).padStart(2, '0');\n\n/**\n * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,\n * prev/next arrows and pause-on-hover. Generic over slide payload type; the\n * caller decides the slide markup via `renderSlide`.\n */\nexport function Carousel<T>({\n  slides,\n  renderSlide,\n  getKey,\n  slidesPerView = 1,\n  autoplay = true,\n  autoplayDelayMs = 5000,\n  showDots = true,\n  showCounter = true,\n  showArrows = true,\n  pauseOnHover = true,\n  ariaLabel,\n  onSelect,\n  arrowSx,\n  dotColor,\n  dotActiveColor,\n  emblaOptions,\n}: CarouselProps<T>) {\n  const plugins = useMemo(\n    () =>\n      autoplay\n        ? [\n            Autoplay({\n              delay: autoplayDelayMs,\n              stopOnInteraction: true,\n              stopOnMouseEnter: pauseOnHover,\n            }),\n          ]\n        : [],\n    [autoplay, autoplayDelayMs, pauseOnHover],\n  );\n\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    { loop: true, align: 'start', ...emblaOptions },\n    plugins,\n  );\n  const [selected, setSelected] = useState(0);\n  const [snapCount, setSnapCount] = useState(0);\n  const count = slides.length;\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    const refreshSnaps = () => {\n      setSnapCount(emblaApi.scrollSnapList().length);\n    };\n    const handleSelect = () => {\n      const next = emblaApi.selectedScrollSnap();\n      setSelected(next);\n      onSelect?.(next);\n    };\n    emblaApi.on('select', handleSelect);\n    emblaApi.on('reInit', refreshSnaps);\n    refreshSnaps();\n    handleSelect();\n    return () => {\n      emblaApi.off('select', handleSelect);\n      emblaApi.off('reInit', refreshSnaps);\n    };\n  }, [emblaApi, onSelect]);\n\n  if (count === 0) return null;\n\n  const showControls = count > 1;\n  const slideBasis = `${100 / Math.max(1, slidesPerView)}%`;\n  // Embla groups slides into snap positions; with slidesPerView > 1 there are\n  // fewer snaps than slides. Fall back to slide count if snap list hasn't\n  // populated yet (first render before embla emits reInit).\n  const dotCount = snapCount > 0 ? snapCount : count;\n\n  // Default arrow style is the carrier-agnostic pill (bg.paper + shadow) so\n  // arrows read on any slide background. Consumers that need a different look\n  // (e.g. transparent white-on-gradient for a banner) pass `arrowSx`.\n  const arrowBaseSx: SxProps<Theme> = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    bgcolor: 'background.paper',\n    boxShadow: 1,\n    '&:hover': { bgcolor: 'background.paper' },\n  };\n\n  return (\n    <Box\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label={ariaLabel}\n      sx={{ position: 'relative', width: '100%' }}\n    >\n      <Box ref={emblaRef} sx={{ overflow: 'hidden' }}>\n        <Box sx={{ display: 'flex' }}>\n          {slides.map((item, i) => (\n            <Box\n              key={getKey ? getKey(item, i) : i}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={`${i + 1} of ${count}`}\n              sx={{ flex: `0 0 ${slideBasis}`, minWidth: 0 }}\n            >\n              {renderSlide(item, i)}\n            </Box>\n          ))}\n        </Box>\n      </Box>\n\n      {showControls && showArrows && (\n        <>\n          <IconButton\n            aria-label=\"Previous slide\"\n            onClick={() => emblaApi?.scrollPrev()}\n            sx={[arrowBaseSx, { left: 8 }, ...(Array.isArray(arrowSx) ? arrowSx : [arrowSx])]}\n          >\n            <ChevronLeftIcon />\n          </IconButton>\n          <IconButton\n            aria-label=\"Next slide\"\n            onClick={() => emblaApi?.scrollNext()}\n            sx={[arrowBaseSx, { right: 8 }, ...(Array.isArray(arrowSx) ? arrowSx : [arrowSx])]}\n          >\n            <ChevronRightIcon />\n          </IconButton>\n        </>\n      )}\n\n      {showControls && showCounter && (\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            position: 'absolute',\n            top: 12,\n            right: 16,\n            px: 1,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: alpha(theme.palette.common.black, 0.5),\n            color: 'common.white',\n            letterSpacing: 1,\n          })}\n        >\n          {pad2(selected + 1)} / {pad2(dotCount)}\n        </Typography>\n      )}\n\n      {showControls && showDots && (\n        <Box\n          role=\"tablist\"\n          aria-label=\"Carousel slides\"\n          sx={{\n            position: 'absolute',\n            bottom: 12,\n            left: 0,\n            right: 0,\n            display: 'flex',\n            justifyContent: 'center',\n            gap: 1,\n          }}\n        >\n          {Array.from({ length: dotCount }).map((_, i) => (\n            <Box\n              key={i}\n              component=\"button\"\n              role=\"tab\"\n              aria-selected={i === selected}\n              aria-label={`Go to slide ${i + 1}`}\n              type=\"button\"\n              onClick={() => emblaApi?.scrollTo(i)}\n              sx={(theme) => ({\n                width: i === selected ? 24 : 8,\n                height: 8,\n                borderRadius: 4,\n                border: 'none',\n                padding: 0,\n                cursor: 'pointer',\n                bgcolor:\n                  i === selected\n                    ? (dotActiveColor ?? theme.palette.primary.main)\n                    : (dotColor ?? theme.palette.action.disabled),\n                transition: 'width 0.2s ease, background 0.2s ease',\n              })}\n            />\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"]}

package/dist/carousel.mjs

@@ -0,0 +1,185 @@
+// src/components/layout/Carousel.tsx
+import { useEffect, useMemo, useState } from "react";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { alpha } from "@mui/material/styles";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var pad2 = (n) => String(n).padStart(2, "0");
+function Carousel({
+  slides,
+  renderSlide,
+  getKey,
+  slidesPerView = 1,
+  autoplay = true,
+  autoplayDelayMs = 5e3,
+  showDots = true,
+  showCounter = true,
+  showArrows = true,
+  pauseOnHover = true,
+  ariaLabel,
+  onSelect,
+  arrowSx,
+  dotColor,
+  dotActiveColor,
+  emblaOptions
+}) {
+  const plugins = useMemo(
+    () => autoplay ? [
+      Autoplay({
+        delay: autoplayDelayMs,
+        stopOnInteraction: true,
+        stopOnMouseEnter: pauseOnHover
+      })
+    ] : [],
+    [autoplay, autoplayDelayMs, pauseOnHover]
+  );
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true, align: "start", ...emblaOptions },
+    plugins
+  );
+  const [selected, setSelected] = useState(0);
+  const [snapCount, setSnapCount] = useState(0);
+  const count = slides.length;
+  useEffect(() => {
+    if (!emblaApi) return;
+    const refreshSnaps = () => {
+      setSnapCount(emblaApi.scrollSnapList().length);
+    };
+    const handleSelect = () => {
+      const next = emblaApi.selectedScrollSnap();
+      setSelected(next);
+      onSelect?.(next);
+    };
+    emblaApi.on("select", handleSelect);
+    emblaApi.on("reInit", refreshSnaps);
+    refreshSnaps();
+    handleSelect();
+    return () => {
+      emblaApi.off("select", handleSelect);
+      emblaApi.off("reInit", refreshSnaps);
+    };
+  }, [emblaApi, onSelect]);
+  if (count === 0) return null;
+  const showControls = count > 1;
+  const slideBasis = `${100 / Math.max(1, slidesPerView)}%`;
+  const dotCount = snapCount > 0 ? snapCount : count;
+  const arrowBaseSx = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    bgcolor: "background.paper",
+    boxShadow: 1,
+    "&:hover": { bgcolor: "background.paper" }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": ariaLabel,
+      sx: { position: "relative", width: "100%" },
+      children: [
+        /* @__PURE__ */ jsx(Box, { ref: emblaRef, sx: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: slides.map((item, i) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": `${i + 1} of ${count}`,
+            sx: { flex: `0 0 ${slideBasis}`, minWidth: 0 },
+            children: renderSlide(item, i)
+          },
+          getKey ? getKey(item, i) : i
+        )) }) }),
+        showControls && showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Previous slide",
+              onClick: () => emblaApi?.scrollPrev(),
+              sx: [arrowBaseSx, { left: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Next slide",
+              onClick: () => emblaApi?.scrollNext(),
+              sx: [arrowBaseSx, { right: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+            }
+          )
+        ] }),
+        showControls && showCounter && /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "caption",
+            sx: (theme) => ({
+              position: "absolute",
+              top: 12,
+              right: 16,
+              px: 1,
+              py: 0.25,
+              borderRadius: 1,
+              bgcolor: alpha(theme.palette.common.black, 0.5),
+              color: "common.white",
+              letterSpacing: 1
+            }),
+            children: [
+              pad2(selected + 1),
+              " / ",
+              pad2(dotCount)
+            ]
+          }
+        ),
+        showControls && showDots && /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "tablist",
+            "aria-label": "Carousel slides",
+            sx: {
+              position: "absolute",
+              bottom: 12,
+              left: 0,
+              right: 0,
+              display: "flex",
+              justifyContent: "center",
+              gap: 1
+            },
+            children: Array.from({ length: dotCount }).map((_, i) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "button",
+                role: "tab",
+                "aria-selected": i === selected,
+                "aria-label": `Go to slide ${i + 1}`,
+                type: "button",
+                onClick: () => emblaApi?.scrollTo(i),
+                sx: (theme) => ({
+                  width: i === selected ? 24 : 8,
+                  height: 8,
+                  borderRadius: 4,
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer",
+                  bgcolor: i === selected ? dotActiveColor ?? theme.palette.primary.main : dotColor ?? theme.palette.action.disabled,
+                  transition: "width 0.2s ease, background 0.2s ease"
+                })
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Carousel
+};
+//# sourceMappingURL=carousel.mjs.map

package/dist/carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Carousel.tsx"],"sourcesContent":["import { Key, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\nimport { alpha } from '@mui/material/styles';\nimport type { SxProps, Theme } from '@mui/material/styles';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport Autoplay from 'embla-carousel-autoplay';\nimport type { EmblaOptionsType } from 'embla-carousel';\n\nexport interface CarouselProps<T> {\n  /** Slide data. Each entry is passed to `renderSlide`. */\n  slides: T[];\n  /** Render function for an individual slide. */\n  renderSlide: (item: T, index: number) => ReactNode;\n  /**\n   * Stable per-slide React key. Always set this when `slides` can be reordered\n   * or filtered; otherwise React will reuse the wrong slide's internal state\n   * across renders. Defaults to the slide's array index when omitted.\n   */\n  getKey?: (item: T, index: number) => Key;\n  /** Slides visible in the viewport. @default 1 */\n  slidesPerView?: number;\n  /** Auto-advance every `autoplayDelayMs` while not hovered. @default true */\n  autoplay?: boolean;\n  /** Autoplay tick in milliseconds. @default 5000 */\n  autoplayDelayMs?: number;\n  /** Show dot indicators when more than one slide. @default true */\n  showDots?: boolean;\n  /** Show the `01 / 03`-style counter when more than one slide. @default true */\n  showCounter?: boolean;\n  /** Show prev/next chevrons when more than one slide. @default true */\n  showArrows?: boolean;\n  /** Pause autoplay while the pointer is over the carousel. @default true */\n  pauseOnHover?: boolean;\n  /** Accessible label for the surrounding region. */\n  ariaLabel?: string;\n  /** Fires with the new index whenever embla selects a slide. */\n  onSelect?: (index: number) => void;\n  /** Override the IconButton sx for the prev/next arrows. */\n  arrowSx?: SxProps<Theme>;\n  /** Override the dot color (inactive). Accepts any CSS color string. */\n  dotColor?: string;\n  /** Override the active dot color. Accepts any CSS color string. */\n  dotActiveColor?: string;\n  /** Escape hatch for advanced embla options. Most consumers don't need this. */\n  emblaOptions?: EmblaOptionsType;\n}\n\nconst pad2 = (n: number) => String(n).padStart(2, '0');\n\n/**\n * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,\n * prev/next arrows and pause-on-hover. Generic over slide payload type; the\n * caller decides the slide markup via `renderSlide`.\n */\nexport function Carousel<T>({\n  slides,\n  renderSlide,\n  getKey,\n  slidesPerView = 1,\n  autoplay = true,\n  autoplayDelayMs = 5000,\n  showDots = true,\n  showCounter = true,\n  showArrows = true,\n  pauseOnHover = true,\n  ariaLabel,\n  onSelect,\n  arrowSx,\n  dotColor,\n  dotActiveColor,\n  emblaOptions,\n}: CarouselProps<T>) {\n  const plugins = useMemo(\n    () =>\n      autoplay\n        ? [\n            Autoplay({\n              delay: autoplayDelayMs,\n              stopOnInteraction: true,\n              stopOnMouseEnter: pauseOnHover,\n            }),\n          ]\n        : [],\n    [autoplay, autoplayDelayMs, pauseOnHover],\n  );\n\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    { loop: true, align: 'start', ...emblaOptions },\n    plugins,\n  );\n  const [selected, setSelected] = useState(0);\n  const [snapCount, setSnapCount] = useState(0);\n  const count = slides.length;\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    const refreshSnaps = () => {\n      setSnapCount(emblaApi.scrollSnapList().length);\n    };\n    const handleSelect = () => {\n      const next = emblaApi.selectedScrollSnap();\n      setSelected(next);\n      onSelect?.(next);\n    };\n    emblaApi.on('select', handleSelect);\n    emblaApi.on('reInit', refreshSnaps);\n    refreshSnaps();\n    handleSelect();\n    return () => {\n      emblaApi.off('select', handleSelect);\n      emblaApi.off('reInit', refreshSnaps);\n    };\n  }, [emblaApi, onSelect]);\n\n  if (count === 0) return null;\n\n  const showControls = count > 1;\n  const slideBasis = `${100 / Math.max(1, slidesPerView)}%`;\n  // Embla groups slides into snap positions; with slidesPerView > 1 there are\n  // fewer snaps than slides. Fall back to slide count if snap list hasn't\n  // populated yet (first render before embla emits reInit).\n  const dotCount = snapCount > 0 ? snapCount : count;\n\n  // Default arrow style is the carrier-agnostic pill (bg.paper + shadow) so\n  // arrows read on any slide background. Consumers that need a different look\n  // (e.g. transparent white-on-gradient for a banner) pass `arrowSx`.\n  const arrowBaseSx: SxProps<Theme> = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    bgcolor: 'background.paper',\n    boxShadow: 1,\n    '&:hover': { bgcolor: 'background.paper' },\n  };\n\n  return (\n    <Box\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label={ariaLabel}\n      sx={{ position: 'relative', width: '100%' }}\n    >\n      <Box ref={emblaRef} sx={{ overflow: 'hidden' }}>\n        <Box sx={{ display: 'flex' }}>\n          {slides.map((item, i) => (\n            <Box\n              key={getKey ? getKey(item, i) : i}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={`${i + 1} of ${count}`}\n              sx={{ flex: `0 0 ${slideBasis}`, minWidth: 0 }}\n            >\n              {renderSlide(item, i)}\n            </Box>\n          ))}\n        </Box>\n      </Box>\n\n      {showControls && showArrows && (\n        <>\n          <IconButton\n            aria-label=\"Previous slide\"\n            onClick={() => emblaApi?.scrollPrev()}\n            sx={[arrowBaseSx, { left: 8 }, ...(Array.isArray(arrowSx) ? arrowSx : [arrowSx])]}\n          >\n            <ChevronLeftIcon />\n          </IconButton>\n          <IconButton\n            aria-label=\"Next slide\"\n            onClick={() => emblaApi?.scrollNext()}\n            sx={[arrowBaseSx, { right: 8 }, ...(Array.isArray(arrowSx) ? arrowSx : [arrowSx])]}\n          >\n            <ChevronRightIcon />\n          </IconButton>\n        </>\n      )}\n\n      {showControls && showCounter && (\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            position: 'absolute',\n            top: 12,\n            right: 16,\n            px: 1,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: alpha(theme.palette.common.black, 0.5),\n            color: 'common.white',\n            letterSpacing: 1,\n          })}\n        >\n          {pad2(selected + 1)} / {pad2(dotCount)}\n        </Typography>\n      )}\n\n      {showControls && showDots && (\n        <Box\n          role=\"tablist\"\n          aria-label=\"Carousel slides\"\n          sx={{\n            position: 'absolute',\n            bottom: 12,\n            left: 0,\n            right: 0,\n            display: 'flex',\n            justifyContent: 'center',\n            gap: 1,\n          }}\n        >\n          {Array.from({ length: dotCount }).map((_, i) => (\n            <Box\n              key={i}\n              component=\"button\"\n              role=\"tab\"\n              aria-selected={i === selected}\n              aria-label={`Go to slide ${i + 1}`}\n              type=\"button\"\n              onClick={() => emblaApi?.scrollTo(i)}\n              sx={(theme) => ({\n                width: i === selected ? 24 : 8,\n                height: 8,\n                borderRadius: 4,\n                border: 'none',\n                padding: 0,\n                cursor: 'pointer',\n                bgcolor:\n                  i === selected\n                    ? (dotActiveColor ?? theme.palette.primary.main)\n                    : (dotColor ?? theme.palette.action.disabled),\n                transition: 'width 0.2s ease, background 0.2s ease',\n              })}\n            />\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/charts.d.mts

@@ -0,0 +1,209 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ChartWidgetHistoryRecord = {
+    date: Date;
+    value: number;
+};
+type ChartWidgetProps = {
+    title: string;
+    value?: ReactNode;
+    history?: ChartWidgetHistoryRecord[];
+    formatValue?: (value: number) => string;
+};
+declare const ChartWidget: ({ title, value, history, formatValue, }: ChartWidgetProps) => react_jsx_runtime.JSX.Element;
+
+type MetricsHistoryRecord = {
+    storedBytes: number;
+    transferredBytes: number;
+    puts: number;
+    gets: number;
+    recordTime: Date;
+};
+type MetricsChartProps = {
+    history?: MetricsHistoryRecord[];
+};
+/**
+ * TODO: Refactor this component to use shared graphs configuration
+ */
+declare const MetricsChart: ({ history }: MetricsChartProps) => react_jsx_runtime.JSX.Element;
+
+type MetricsPeriod = 'hour' | 'day' | 'week' | 'month';
+type PeriodSelectProps = {
+    value?: MetricsPeriod;
+    onChange?: (value: MetricsPeriod) => void;
+};
+declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a single time range option in the dropdown.
+ */
+interface TimeRangeOption {
+    /** Display label shown in the dropdown (e.g., "1 week") */
+    label: string;
+    /** Value identifier passed to the callback on selection */
+    value: string;
+}
+interface TimeRangeSelectProps {
+    /** Available time range options */
+    options: TimeRangeOption[];
+    /** Currently selected time range value */
+    value?: string;
+    /** Callback invoked when user selects a different time range */
+    onChange?: (value: string) => void;
+}
+/**
+ * Configurable time range dropdown selector.
+ * Renders a compact select field with the provided time range options.
+ *
+ * @example
+ * ```tsx
+ * <TimeRangeSelect
+ *   options={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *   ]}
+ *   value="week"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a single summary statistic item displayed below the graph.
+ */
+interface SummaryItem {
+    /** Descriptive label (e.g., "Total Engagements") */
+    label: string;
+    /** Numeric or string value (e.g., "13.72" or 11372) */
+    value: string | number;
+    /** Optional unit suffix (e.g., "K", "GB", "%") */
+    unit?: string;
+}
+interface SummaryStatsProps {
+    /** Array of summary items to display */
+    items: SummaryItem[];
+}
+/**
+ * Renders a horizontal row of summary statistics below the graph.
+ * Each item shows a label with its corresponding value and optional unit.
+ *
+ * Matches the Figma design layout with label in secondary text color
+ * and value in bold heading typography.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStats
+ *   items={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * A single data point in a time series.
+ * Use `null` for the value to represent missing/gap data — the line will break.
+ */
+interface DataPoint {
+    /** Timestamp of the observation */
+    timestamp: Date;
+    /** Numeric value, or `null` to indicate a gap in the data */
+    value: number | null;
+}
+/**
+ * Represents one line on the graph (a named data series).
+ */
+interface DataSeries {
+    /** Unique display name for this series (shown in legend) */
+    name: string;
+    /** CSS color string for the line and legend indicator */
+    color: string;
+    /** Ordered array of data points */
+    data: DataPoint[];
+}
+interface TimeSeriesGraphProps {
+    /** Optional title displayed at the top-left of the graph card */
+    title?: string;
+    /**
+     * Array of data series to render. Each series becomes one line on the graph.
+     * There is no hardcoded limit on the number of series.
+     */
+    series: DataSeries[];
+    /**
+     * Configurable time range options for the dropdown selector.
+     * When omitted, the time range dropdown is not rendered.
+     */
+    timeRangeOptions?: TimeRangeOption[];
+    /** Currently selected time range value (controlled) */
+    selectedTimeRange?: string;
+    /** Callback invoked when the user picks a different time range */
+    onTimeRangeChange?: (value: string) => void;
+    /**
+     * Optional array of summary statistics displayed below the graph.
+     * When omitted or empty, the summary section is hidden.
+     */
+    summaryItems?: SummaryItem[];
+    /**
+     * Whether to show the summary statistics section.
+     * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
+     */
+    showSummary?: boolean;
+    /**
+     * Optional header action element rendered to the right of the title
+     * (e.g., a secondary dropdown or filter control).
+     */
+    headerAction?: ReactNode;
+    /**
+     * When `true`, shows a loading overlay (spinner) over the graph area
+     * while the header remains visible and interactive.
+     */
+    loading?: boolean;
+    /**
+     * Override the x-axis date format string (date-fns format tokens).
+     * When omitted, the format is auto-detected from the data's time span:
+     * - <= 24 hours → `'HH:mm'`
+     * - > 24 hours  → `'do MMM'`
+     */
+    xAxisFormat?: string;
+}
+/**
+ * A reusable time series graph component that displays one or more data lines
+ * over a shared time axis. Supports configurable time range selection,
+ * optional summary statistics, interactive legend toggling, crosshair tooltips,
+ * and a loading state.
+ *
+ * Built on `@mui/x-charts` LineChart and the Cere Design System theme.
+ *
+ * @example
+ * ```tsx
+ * <TimeSeriesGraph
+ *   title="Engagement over time"
+ *   series={[
+ *     { name: 'Engagements', color: '#6750A4', data: engagementData },
+ *     { name: 'Unique Streams', color: '#4caf50', data: streamData },
+ *   ]}
+ *   timeRangeOptions={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *     { label: '1 month', value: 'month' },
+ *   ]}
+ *   selectedTimeRange="week"
+ *   onTimeRangeChange={(range) => fetchData(range)}
+ *   summaryItems={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Daily Engagements', value: 156 },
+ *   ]}
+ * />
+ * ```
+ *
+ * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
+ */
+declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
+
+export { ChartWidget, type ChartWidgetProps, type DataPoint, type DataSeries, MetricsChart, type MetricsChartProps, type MetricsPeriod, PeriodSelect, type SummaryItem, SummaryStats, type SummaryStatsProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps };

package/dist/charts.d.ts

@@ -0,0 +1,209 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ChartWidgetHistoryRecord = {
+    date: Date;
+    value: number;
+};
+type ChartWidgetProps = {
+    title: string;
+    value?: ReactNode;
+    history?: ChartWidgetHistoryRecord[];
+    formatValue?: (value: number) => string;
+};
+declare const ChartWidget: ({ title, value, history, formatValue, }: ChartWidgetProps) => react_jsx_runtime.JSX.Element;
+
+type MetricsHistoryRecord = {
+    storedBytes: number;
+    transferredBytes: number;
+    puts: number;
+    gets: number;
+    recordTime: Date;
+};
+type MetricsChartProps = {
+    history?: MetricsHistoryRecord[];
+};
+/**
+ * TODO: Refactor this component to use shared graphs configuration
+ */
+declare const MetricsChart: ({ history }: MetricsChartProps) => react_jsx_runtime.JSX.Element;
+
+type MetricsPeriod = 'hour' | 'day' | 'week' | 'month';
+type PeriodSelectProps = {
+    value?: MetricsPeriod;
+    onChange?: (value: MetricsPeriod) => void;
+};
+declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a single time range option in the dropdown.
+ */
+interface TimeRangeOption {
+    /** Display label shown in the dropdown (e.g., "1 week") */
+    label: string;
+    /** Value identifier passed to the callback on selection */
+    value: string;
+}
+interface TimeRangeSelectProps {
+    /** Available time range options */
+    options: TimeRangeOption[];
+    /** Currently selected time range value */
+    value?: string;
+    /** Callback invoked when user selects a different time range */
+    onChange?: (value: string) => void;
+}
+/**
+ * Configurable time range dropdown selector.
+ * Renders a compact select field with the provided time range options.
+ *
+ * @example
+ * ```tsx
+ * <TimeRangeSelect
+ *   options={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *   ]}
+ *   value="week"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a single summary statistic item displayed below the graph.
+ */
+interface SummaryItem {
+    /** Descriptive label (e.g., "Total Engagements") */
+    label: string;
+    /** Numeric or string value (e.g., "13.72" or 11372) */
+    value: string | number;
+    /** Optional unit suffix (e.g., "K", "GB", "%") */
+    unit?: string;
+}
+interface SummaryStatsProps {
+    /** Array of summary items to display */
+    items: SummaryItem[];
+}
+/**
+ * Renders a horizontal row of summary statistics below the graph.
+ * Each item shows a label with its corresponding value and optional unit.
+ *
+ * Matches the Figma design layout with label in secondary text color
+ * and value in bold heading typography.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStats
+ *   items={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * A single data point in a time series.
+ * Use `null` for the value to represent missing/gap data — the line will break.
+ */
+interface DataPoint {
+    /** Timestamp of the observation */
+    timestamp: Date;
+    /** Numeric value, or `null` to indicate a gap in the data */
+    value: number | null;
+}
+/**
+ * Represents one line on the graph (a named data series).
+ */
+interface DataSeries {
+    /** Unique display name for this series (shown in legend) */
+    name: string;
+    /** CSS color string for the line and legend indicator */
+    color: string;
+    /** Ordered array of data points */
+    data: DataPoint[];
+}
+interface TimeSeriesGraphProps {
+    /** Optional title displayed at the top-left of the graph card */
+    title?: string;
+    /**
+     * Array of data series to render. Each series becomes one line on the graph.
+     * There is no hardcoded limit on the number of series.
+     */
+    series: DataSeries[];
+    /**
+     * Configurable time range options for the dropdown selector.
+     * When omitted, the time range dropdown is not rendered.
+     */
+    timeRangeOptions?: TimeRangeOption[];
+    /** Currently selected time range value (controlled) */
+    selectedTimeRange?: string;
+    /** Callback invoked when the user picks a different time range */
+    onTimeRangeChange?: (value: string) => void;
+    /**
+     * Optional array of summary statistics displayed below the graph.
+     * When omitted or empty, the summary section is hidden.
+     */
+    summaryItems?: SummaryItem[];
+    /**
+     * Whether to show the summary statistics section.
+     * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
+     */
+    showSummary?: boolean;
+    /**
+     * Optional header action element rendered to the right of the title
+     * (e.g., a secondary dropdown or filter control).
+     */
+    headerAction?: ReactNode;
+    /**
+     * When `true`, shows a loading overlay (spinner) over the graph area
+     * while the header remains visible and interactive.
+     */
+    loading?: boolean;
+    /**
+     * Override the x-axis date format string (date-fns format tokens).
+     * When omitted, the format is auto-detected from the data's time span:
+     * - <= 24 hours → `'HH:mm'`
+     * - > 24 hours  → `'do MMM'`
+     */
+    xAxisFormat?: string;
+}
+/**
+ * A reusable time series graph component that displays one or more data lines
+ * over a shared time axis. Supports configurable time range selection,
+ * optional summary statistics, interactive legend toggling, crosshair tooltips,
+ * and a loading state.
+ *
+ * Built on `@mui/x-charts` LineChart and the Cere Design System theme.
+ *
+ * @example
+ * ```tsx
+ * <TimeSeriesGraph
+ *   title="Engagement over time"
+ *   series={[
+ *     { name: 'Engagements', color: '#6750A4', data: engagementData },
+ *     { name: 'Unique Streams', color: '#4caf50', data: streamData },
+ *   ]}
+ *   timeRangeOptions={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *     { label: '1 month', value: 'month' },
+ *   ]}
+ *   selectedTimeRange="week"
+ *   onTimeRangeChange={(range) => fetchData(range)}
+ *   summaryItems={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Daily Engagements', value: 156 },
+ *   ]}
+ * />
+ * ```
+ *
+ * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
+ */
+declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
+
+export { ChartWidget, type ChartWidgetProps, type DataPoint, type DataSeries, MetricsChart, type MetricsChartProps, type MetricsPeriod, PeriodSelect, type SummaryItem, SummaryStats, type SummaryStatsProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps };

package/dist/charts.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+var _chunkKF2Y7HO3js = require('./chunk-KF2Y7HO3.js');
+require('./chunk-AIY6222Q.js');
+require('./chunk-FN5YL4BK.js');
+require('./chunk-ZGCN5WCG.js');
+
+
+
+
+
+
+
+exports.ChartWidget = _chunkKF2Y7HO3js.ChartWidget; exports.MetricsChart = _chunkKF2Y7HO3js.MetricsChart; exports.PeriodSelect = _chunkKF2Y7HO3js.PeriodSelect; exports.SummaryStats = _chunkKF2Y7HO3js.SummaryStats; exports.TimeRangeSelect = _chunkKF2Y7HO3js.TimeRangeSelect; exports.TimeSeriesGraph = _chunkKF2Y7HO3js.TimeSeriesGraph;
+//# sourceMappingURL=charts.js.map