@multiplatform.one/components 5.0.26 → 6.0.0

package/dist/esm/views/Dashboard.native.js

@@ -0,0 +1,529 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { componentColors } from "../componentColors.native.js";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useMemo, useCallback } from "react";
+import { Card, ScrollView, Text, XStack, YStack, H3, H4 } from "tamagui";
+var defaultChartColors = ["var(--accentBackground)", "var(--color7)", "var(--color8)", "var(--color9)", "var(--color10)", "var(--color11)", "var(--color6)", "var(--color5)"];
+function KPICard(param) {
+  var {
+    config,
+    ...stackProps
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var formattedValue = useMemo(function () {
+    if (typeof config.value === "string") return config.value;
+    var num = config.value;
+    if (config.format === "currency") {
+      return `${config.currencySymbol || "$"}${num.toLocaleString()}`;
+    }
+    if (config.format === "percent") {
+      return `${num.toLocaleString()}%`;
+    }
+    return num.toLocaleString();
+  }, [config.value, config.format, config.currencySymbol]);
+  var trendColor = useMemo(function () {
+    if (config.trend === "up") return componentColors.semantic.success;
+    if (config.trend === "down") return componentColors.semantic.error;
+    return componentColors.text.muted;
+  }, [config.trend]);
+  var trendSymbol = useMemo(function () {
+    if (config.trend === "up") return "\u2191";
+    if (config.trend === "down") return "\u2193";
+    return "\u2014";
+  }, [config.trend]);
+  return /* @__PURE__ */_jsxs(Card, {
+    size: knobProps.sizeToken,
+    elevation: knobProps.elevation,
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    cursor: config.onClick ? "pointer" : void 0,
+    hoverStyle: config.onClick ? {
+      scale: 0.98,
+      borderColor: "$accentBackground"
+    } : void 0,
+    pressStyle: config.onClick ? {
+      scale: 0.97
+    } : void 0,
+    onPress: config.onClick,
+    ...stackProps,
+    children: [/* @__PURE__ */_jsx(Card.Header, {
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */_jsxs(XStack, {
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontSize: knobProps.sizeToken,
+          color: componentColors.text.muted,
+          fontWeight: "500",
+          children: config.title
+        }), config.icon && /* @__PURE__ */_jsx(YStack, {
+          backgroundColor: config.color || "$accentBackground",
+          padding: "$2",
+          ...knobProps.borderRadius,
+          children: config.icon
+        })]
+      })
+    }), /* @__PURE__ */_jsx(Card.Footer, {
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */_jsxs(YStack, {
+        ...knobProps.gap,
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontSize: "$8",
+          fontWeight: "700",
+          color: "$color",
+          children: formattedValue
+        }), (config.trend || config.trendValue) && /* @__PURE__ */_jsxs(XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: [/* @__PURE__ */_jsx(Text, {
+            fontSize: "$2",
+            color: trendColor,
+            children: trendSymbol
+          }), config.trendValue && /* @__PURE__ */_jsx(Text, {
+            fontSize: "$2",
+            color: trendColor,
+            children: config.trendValue
+          }), config.previousValue !== void 0 && /* @__PURE__ */_jsxs(Text, {
+            fontSize: "$2",
+            color: componentColors.text.muted,
+            children: ["vs ", config.previousValue.toLocaleString()]
+          })]
+        })]
+      })
+    })]
+  });
+}
+function BarChart(param) {
+  var {
+    config,
+    colors
+  } = param;
+  var {
+    data,
+    height = 200,
+    showLabels = true
+  } = config;
+  var maxValue = useMemo(function () {
+    return Math.max(...data.map(function (d) {
+      return d.value;
+    }), 1);
+  }, [data]);
+  var labelHeight = showLabels ? 28 : 0;
+  var chartHeight = height - labelHeight;
+  var barWidth = 100 / Math.max(data.length, 1);
+  var padding = barWidth * 0.15;
+  return /* @__PURE__ */_jsxs(YStack, {
+    height,
+    width: "100%",
+    children: [/* @__PURE__ */_jsx(YStack, {
+      flex: 1,
+      width: "100%",
+      children: /* @__PURE__ */_jsx("svg", {
+        width: "100%",
+        height: "100%",
+        viewBox: `0 0 100 ${chartHeight}`,
+        preserveAspectRatio: "none",
+        children: data.map(function (point, index) {
+          var barHeight = point.value / maxValue * chartHeight;
+          var x = index * barWidth + padding;
+          var y = chartHeight - barHeight;
+          var color = point.color || colors[index % colors.length];
+          return /* @__PURE__ */_jsx("rect", {
+            x: `${x}%`,
+            y,
+            width: `${barWidth - padding * 2}%`,
+            height: barHeight,
+            fill: color,
+            rx: "2"
+          }, point.label);
+        })
+      })
+    }), showLabels && /* @__PURE__ */_jsx(XStack, {
+      height: labelHeight,
+      width: "100%",
+      alignItems: "center",
+      children: data.map(function (point) {
+        return /* @__PURE__ */_jsx(Text, {
+          flex: 1,
+          textAlign: "center",
+          fontSize: "$2",
+          color: componentColors.text.muted,
+          numberOfLines: 1,
+          children: point.label
+        }, point.label);
+      })
+    })]
+  });
+}
+function LineChart(param) {
+  var {
+    config,
+    colors
+  } = param;
+  var {
+    data,
+    height = 200,
+    showLabels = true
+  } = config;
+  var maxValue = useMemo(function () {
+    return Math.max(...data.map(function (d) {
+      return d.value;
+    }), 1);
+  }, [data]);
+  var labelHeight = showLabels ? 28 : 0;
+  var chartHeight = height - labelHeight;
+  var points = useMemo(function () {
+    if (data.length < 2) return "";
+    var xStep = 100 / (data.length - 1);
+    return data.map(function (point, index) {
+      var x = index * xStep;
+      var y = chartHeight - point.value / maxValue * chartHeight;
+      return `${x},${y}`;
+    }).join(" ");
+  }, [data, maxValue, chartHeight]);
+  var areaPath = useMemo(function () {
+    if (data.length < 2) return "";
+    var xStep = 100 / (data.length - 1);
+    var path = `M 0,${chartHeight}`;
+    data.forEach(function (point, index) {
+      var x = index * xStep;
+      var y = chartHeight - point.value / maxValue * chartHeight;
+      path += ` L ${x},${y}`;
+    });
+    path += ` L 100,${chartHeight} Z`;
+    return path;
+  }, [data, maxValue, chartHeight]);
+  var color = colors[0];
+  return /* @__PURE__ */_jsxs(YStack, {
+    height,
+    width: "100%",
+    children: [/* @__PURE__ */_jsx(YStack, {
+      flex: 1,
+      width: "100%",
+      children: /* @__PURE__ */_jsxs("svg", {
+        width: "100%",
+        height: "100%",
+        viewBox: `0 0 100 ${chartHeight}`,
+        preserveAspectRatio: "none",
+        children: [/* @__PURE__ */_jsx("path", {
+          d: areaPath,
+          fill: color,
+          opacity: "0.2"
+        }), /* @__PURE__ */_jsx("polyline", {
+          points,
+          fill: "none",
+          stroke: color,
+          strokeWidth: "2",
+          vectorEffect: "non-scaling-stroke"
+        }), data.map(function (point, index) {
+          var xStep = 100 / (data.length - 1);
+          var x = index * xStep;
+          var y = chartHeight - point.value / maxValue * chartHeight;
+          return /* @__PURE__ */_jsx("circle", {
+            cx: x,
+            cy: y,
+            r: "3",
+            fill: color,
+            vectorEffect: "non-scaling-stroke"
+          }, point.label);
+        })]
+      })
+    }), showLabels && /* @__PURE__ */_jsx(XStack, {
+      height: labelHeight,
+      width: "100%",
+      alignItems: "center",
+      children: data.map(function (point) {
+        return /* @__PURE__ */_jsx(Text, {
+          flex: 1,
+          textAlign: "center",
+          fontSize: "$2",
+          color: componentColors.text.muted,
+          numberOfLines: 1,
+          children: point.label
+        }, point.label);
+      })
+    })]
+  });
+}
+function PieChart(param) {
+  var {
+    config,
+    colors
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var {
+    data,
+    height = 200,
+    showLegend = true
+  } = config;
+  var total = useMemo(function () {
+    return data.reduce(function (sum, d) {
+      return sum + d.value;
+    }, 0) || 1;
+  }, [data]);
+  var segments = useMemo(function () {
+    var result = [];
+    var currentAngle = -90;
+    data.forEach(function (point, index) {
+      var percentage = point.value / total;
+      var angle = percentage * 360;
+      result.push({
+        label: point.label,
+        value: point.value,
+        color: point.color || colors[index % colors.length],
+        startAngle: currentAngle,
+        endAngle: currentAngle + angle
+      });
+      currentAngle += angle;
+    });
+    return result;
+  }, [data, total, colors]);
+  var describeArc = useCallback(function (cx2, cy2, radius2, startAngle, endAngle) {
+    var start = polarToCartesian(cx2, cy2, radius2, endAngle);
+    var end = polarToCartesian(cx2, cy2, radius2, startAngle);
+    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+    return ["M", cx2, cy2, "L", start.x, start.y, "A", radius2, radius2, 0, largeArcFlag, 0, end.x, end.y, "Z"].join(" ");
+  }, []);
+  var size = Math.min(height, 200);
+  var radius = size * 0.35;
+  var cx = size / 2;
+  var cy = size / 2;
+  return /* @__PURE__ */_jsxs(XStack, {
+    height,
+    width: "100%",
+    ...knobProps.gap,
+    children: [/* @__PURE__ */_jsx(YStack, {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */_jsxs("svg", {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        children: [segments.map(function (segment) {
+          return /* @__PURE__ */_jsx("path", {
+            d: describeArc(cx, cy, radius, segment.startAngle, segment.endAngle),
+            fill: segment.color
+          }, segment.label);
+        }), /* @__PURE__ */_jsx("circle", {
+          cx,
+          cy,
+          r: radius * 0.5,
+          fill: "var(--background)"
+        })]
+      })
+    }), showLegend && /* @__PURE__ */_jsx(ScrollView, {
+      flex: 1,
+      maxHeight: height,
+      children: /* @__PURE__ */_jsx(YStack, {
+        gap: "$2",
+        children: segments.map(function (segment) {
+          return /* @__PURE__ */_jsxs(XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */_jsx(YStack, {
+              width: 12,
+              height: 12,
+              borderRadius: "$2",
+              backgroundColor: segment.color
+            }), /* @__PURE__ */_jsx(Text, {
+              fontSize: "$2",
+              color: componentColors.text.muted,
+              flex: 1,
+              numberOfLines: 1,
+              children: segment.label
+            }), /* @__PURE__ */_jsx(Text, {
+              fontSize: "$2",
+              fontWeight: "500",
+              children: segment.value.toLocaleString()
+            })]
+          }, segment.label);
+        })
+      })
+    })]
+  });
+}
+function polarToCartesian(cx, cy, radius, angleInDegrees) {
+  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
+  return {
+    x: cx + radius * Math.cos(angleInRadians),
+    y: cy + radius * Math.sin(angleInRadians)
+  };
+}
+function ChartCard(param) {
+  var {
+    config,
+    colors = defaultChartColors,
+    ...stackProps
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var chartColors = config.colors || colors;
+  var ChartComponent = useMemo(function () {
+    switch (config.type) {
+      case "bar":
+        return BarChart;
+      case "line":
+        return LineChart;
+      case "pie":
+        return PieChart;
+      default:
+        return BarChart;
+    }
+  }, [config.type]);
+  return /* @__PURE__ */_jsxs(Card, {
+    size: knobProps.sizeToken,
+    elevation: knobProps.elevation,
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    ...stackProps,
+    children: [/* @__PURE__ */_jsx(Card.Header, {
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */_jsx(H4, {
+        children: config.title
+      })
+    }), /* @__PURE__ */_jsx(Card.Footer, {
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */_jsx(ChartComponent, {
+        config,
+        colors: chartColors
+      })
+    })]
+  });
+}
+function Dashboard(param) {
+  var {
+    widgets,
+    renderWidget,
+    title,
+    description,
+    columns = 4,
+    gap: gapProp,
+    padding: paddingProp,
+    ...stackProps
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var sz = knobProps.sizeToken;
+  var gap = gapProp !== null && gapProp !== void 0 ? gapProp : sz === "$3" ? 12 : sz === "$5" ? 20 : 16;
+  var padding = paddingProp !== null && paddingProp !== void 0 ? paddingProp : sz === "$3" ? 12 : sz === "$5" ? 20 : 16;
+  return /* @__PURE__ */_jsx(ScrollView, {
+    children: /* @__PURE__ */_jsxs(YStack, {
+      padding,
+      gap,
+      ...stackProps,
+      children: [/* Header */
+      (title || description) && /* @__PURE__ */_jsxs(YStack, {
+        ...knobProps.gap,
+        marginBottom: "$2",
+        children: [title && /* @__PURE__ */_jsx(H3, {
+          children: title
+        }), description && /* @__PURE__ */_jsx(Text, {
+          fontSize: sz,
+          color: componentColors.text.muted,
+          children: description
+        })]
+      }), /* Widget Grid */
+      /* @__PURE__ */_jsx(XStack, {
+        flexWrap: "wrap",
+        gap,
+        marginHorizontal: -gap / 2,
+        children: widgets.map(function (widget) {
+          var span = widget.colSpan || 1;
+          var widthPercent = span / columns * 100;
+          var adjustedWidth = `calc(${widthPercent}% - ${gap}px)`;
+          return /* @__PURE__ */_jsx(YStack, {
+            width: adjustedWidth,
+            minWidth: 200,
+            marginHorizontal: gap / 2,
+            children: renderWidget ? renderWidget(widget) : /* @__PURE__ */_jsxs(_Fragment, {
+              children: [widget.type === "kpi" && widget.kpiConfig && /* @__PURE__ */_jsx(KPICard, {
+                config: widget.kpiConfig
+              }), widget.type === "chart" && widget.chartConfig && /* @__PURE__ */_jsx(ChartCard, {
+                config: widget.chartConfig
+              })]
+            })
+          }, widget.id);
+        })
+      })]
+    })
+  });
+}
+function calculateTrend(current, previous) {
+  if (current > previous) return "up";
+  if (current < previous) return "down";
+  return "neutral";
+}
+function calculatePercentageChange(current, previous) {
+  if (previous === 0) return current > 0 ? "+100%" : "0%";
+  var change = (current - previous) / previous * 100;
+  var sign = change >= 0 ? "+" : "";
+  return `${sign}${change.toFixed(1)}%`;
+}
+function aggregateData(data, groupByField, valueField) {
+  var operation = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "count";
+  var groups = {};
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var item = _step.value;
+      var key = String(item[groupByField]);
+      if (!groups[key]) groups[key] = [];
+      if (operation === "count") {
+        groups[key].push(1);
+      } else {
+        var value = Number(item[valueField]) || 0;
+        groups[key].push(value);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return Object.entries(groups).map(function (param) {
+    var [label, values] = param;
+    var value2;
+    switch (operation) {
+      case "count":
+        value2 = values.length;
+        break;
+      case "sum":
+        value2 = values.reduce(function (a, b) {
+          return a + b;
+        }, 0);
+        break;
+      case "avg":
+        value2 = values.reduce(function (a, b) {
+          return a + b;
+        }, 0) / values.length;
+        break;
+      default:
+        value2 = values.length;
+    }
+    return {
+      label,
+      value: value2
+    };
+  });
+}
+export { ChartCard, Dashboard, KPICard, aggregateData, calculatePercentageChange, calculateTrend };
+//# sourceMappingURL=Dashboard.native.js.map

package/dist/esm/views/Dashboard.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","componentColors","useResolvedKnobs","React","useMemo","useCallback","Card","ScrollView","Text","XStack","YStack","H3","H4","defaultChartColors","KPICard","param","config","stackProps","knobProps","formattedValue","value","num","format","currencySymbol","toLocaleString","trendColor","trend","semantic","success","error","text","muted","trendSymbol","size","sizeToken","elevation","borderWidth","borderColor","cursor","onClick","hoverStyle","scale","pressStyle","onPress","children","Header","panelPadding","justifyContent","alignItems","fontSize","color","fontWeight","title","icon","backgroundColor","padding","borderRadius","Footer","gap","trendValue","previousValue","BarChart","colors","data","height","showLabels","maxValue","Math","max","map","d","labelHeight","chartHeight","barWidth","length","width","flex","viewBox","preserveAspectRatio","point","index","barHeight","x","y","fill","rx","label","textAlign","numberOfLines","LineChart","points","xStep","join","areaPath","path","forEach","opacity","stroke","strokeWidth","vectorEffect","cx","cy","r","PieChart","showLegend","total","reduce","sum","segments","result","currentAngle","percentage","angle","push","startAngle","endAngle","describeArc","cx2","cy2","radius2","start","polarToCartesian","end","largeArcFlag","min","radius","segment","maxHeight"],"sources":["../../../src/views/Dashboard.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/views/Dashboard.stories.mjs

@@ -0,0 +1,69 @@
+import { Dashboard } from "./Dashboard.mjs";
+import { jsx } from "react/jsx-runtime";
+const widgets = [{
+  id: "kpi-1",
+  type: "kpi",
+  kpiConfig: {
+    label: "Total Revenue",
+    value: "$12,450",
+    trend: "up",
+    trendValue: "+12%"
+  }
+}, {
+  id: "kpi-2",
+  type: "kpi",
+  kpiConfig: {
+    label: "Active Users",
+    value: "1,234",
+    trend: "up",
+    trendValue: "+5%"
+  }
+}, {
+  id: "kpi-3",
+  type: "kpi",
+  kpiConfig: {
+    label: "Conversion Rate",
+    value: "3.2%",
+    trend: "down",
+    trendValue: "-0.5%"
+  }
+}, {
+  id: "chart-1",
+  type: "chart",
+  colSpan: 2,
+  chartConfig: {
+    title: "Monthly Revenue",
+    type: "bar",
+    data: [{
+      label: "Jan",
+      value: 4e3
+    }, {
+      label: "Feb",
+      value: 3e3
+    }, {
+      label: "Mar",
+      value: 5e3
+    }, {
+      label: "Apr",
+      value: 4500
+    }]
+  }
+}];
+const meta = {
+  title: "Components/Dashboard",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var Dashboard_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(Dashboard, {
+    widgets,
+    title: "Sales Dashboard"
+  })
+};
+export { Default, Dashboard_stories_default as default };
+//# sourceMappingURL=Dashboard.stories.mjs.map

package/dist/esm/views/Dashboard.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dashboard","jsx","widgets","id","type","kpiConfig","label","value","trend","trendValue","colSpan","chartConfig","title","data","meta","parameters","status","Dashboard_stories_default","Default","name","render"],"sources":["../../../src/views/Dashboard.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,SAAA,QAAuC;AA8ChC,SAAAC,GAAA;AA5ChB,MAAMC,OAAA,GAA6B,CACjC;EACEC,EAAA,EAAI;EACJC,IAAA,EAAM;EACNC,SAAA,EAAW;IAAEC,KAAA,EAAO;IAAiBC,KAAA,EAAO;IAAWC,KAAA,EAAO;IAAMC,UAAA,EAAY;EAAO;AACzF,GACA;EACEN,EAAA,EAAI;EACJC,IAAA,EAAM;EACNC,SAAA,EAAW;IAAEC,KAAA,EAAO;IAAgBC,KAAA,EAAO;IAASC,KAAA,EAAO;IAAMC,UAAA,EAAY;EAAM;AACrF,GACA;EACEN,EAAA,EAAI;EACJC,IAAA,EAAM;EACNC,SAAA,EAAW;IAAEC,KAAA,EAAO;IAAmBC,KAAA,EAAO;IAAQC,KAAA,EAAO;IAAQC,UAAA,EAAY;EAAQ;AAC3F,GACA;EACEN,EAAA,EAAI;EACJC,IAAA,EAAM;EACNM,OAAA,EAAS;EACTC,WAAA,EAAa;IACXC,KAAA,EAAO;IACPR,IAAA,EAAM;IACNS,IAAA,EAAM,CACJ;MAAEP,KAAA,EAAO;MAAOC,KAAA,EAAO;IAAK,GAC5B;MAAED,KAAA,EAAO;MAAOC,KAAA,EAAO;IAAK,GAC5B;MAAED,KAAA,EAAO;MAAOC,KAAA,EAAO;IAAK,GAC5B;MAAED,KAAA,EAAO;MAAOC,KAAA,EAAO;IAAK;EAEhC;AACF,EACF;AAEA,MAAMO,IAAA,GAAa;EACjBF,KAAA,EAAO;EACPG,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEZ,IAAA,EAAM;IAAS;EAC3B;AACF;AAEA,IAAOa,yBAAA,GAAQH,IAAA;AAER,MAAMI,OAAA,GAAU;EACrBC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KAAM,eAAAnB,GAAA,CAACD,SAAA;IAAUE,OAAA;IAAkBU,KAAA,EAAM;EAAA,CAAkB;AACrE","ignoreList":[]}

package/dist/esm/views/Dashboard.stories.native.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dashboard } from "./Dashboard.native.js";
+var widgets = [{
+  id: "kpi-1",
+  type: "kpi",
+  kpiConfig: {
+    label: "Total Revenue",
+    value: "$12,450",
+    trend: "up",
+    trendValue: "+12%"
+  }
+}, {
+  id: "kpi-2",
+  type: "kpi",
+  kpiConfig: {
+    label: "Active Users",
+    value: "1,234",
+    trend: "up",
+    trendValue: "+5%"
+  }
+}, {
+  id: "kpi-3",
+  type: "kpi",
+  kpiConfig: {
+    label: "Conversion Rate",
+    value: "3.2%",
+    trend: "down",
+    trendValue: "-0.5%"
+  }
+}, {
+  id: "chart-1",
+  type: "chart",
+  colSpan: 2,
+  chartConfig: {
+    title: "Monthly Revenue",
+    type: "bar",
+    data: [{
+      label: "Jan",
+      value: 4e3
+    }, {
+      label: "Feb",
+      value: 3e3
+    }, {
+      label: "Mar",
+      value: 5e3
+    }, {
+      label: "Apr",
+      value: 4500
+    }]
+  }
+}];
+var meta = {
+  title: "Components/Dashboard",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var Dashboard_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(Dashboard, {
+      widgets,
+      title: "Sales Dashboard"
+    });
+  }
+};
+export { Default, Dashboard_stories_default as default };
+//# sourceMappingURL=Dashboard.stories.native.js.map