@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/dashboard/layout.d.cts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from '../ui/separator.cjs';
+import { Gap } from './spacing.cjs';
+import 'radix-ui';
+
+declare const widgetContentVariants: (props?: ({
+    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+    scroll?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface WidgetContentProps extends React.ComponentProps<"div">, VariantProps<typeof widgetContentVariants> {
+    /**
+     * Apply the glass token scope so surfaces read as translucent on the
+     * frosted dashboard tile. On by default; set `false` for solid full
+     * plugin views (outside a dashboard tile).
+     */
+    glass?: boolean;
+}
+/** Full-height widget content frame with standard padding + a container query. */
+declare function WidgetContent({ className, padding, scroll, glass, ...props }: WidgetContentProps): react_jsx_runtime.JSX.Element;
+declare const alignClass: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+};
+declare const justifyClass: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+    readonly around: "justify-around";
+};
+interface StackProps extends React.ComponentProps<"div"> {
+    gap?: Gap;
+    align?: keyof typeof alignClass;
+    justify?: keyof typeof justifyClass;
+    /**
+     * Grow to fill the remaining height of a flex parent (e.g. the top-level
+     * Stack under `WidgetContent`, so a nested `scroll` region can bound).
+     */
+    fill?: boolean;
+    /** Fill remaining height and scroll overflow. Use for the main content flow. */
+    scroll?: boolean;
+}
+/** Vertical layout with semantic spacing, alignment and optional scrolling. */
+declare function Stack({ className, gap, align, justify, fill, scroll, ...props }: StackProps): react_jsx_runtime.JSX.Element;
+interface InlineProps extends React.ComponentProps<"div"> {
+    gap?: Gap;
+    align?: keyof typeof alignClass;
+    justify?: keyof typeof justifyClass;
+    wrap?: boolean;
+}
+/** Horizontal layout with semantic spacing, alignment, wrap and justify. */
+declare function Inline({ className, gap, align, justify, wrap, ...props }: InlineProps): react_jsx_runtime.JSX.Element;
+declare const columnsClass: {
+    readonly 1: "grid-cols-1";
+    readonly 2: "grid-cols-2";
+    readonly 3: "grid-cols-3";
+    readonly 4: "grid-cols-4";
+};
+interface GridProps extends React.ComponentProps<"div"> {
+    /** Fixed column count, or `auto` for a responsive min-width fill. */
+    columns?: keyof typeof columnsClass | "auto";
+    gap?: Gap;
+    /** Minimum column width for `columns="auto"`. */
+    minColumnWidth?: number;
+}
+/** Responsive grid with bounded columns for metric and summary layouts. */
+declare function Grid({ className, columns, gap, minColumnWidth, style, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+interface SectionProps extends React.ComponentProps<"div"> {
+    /** Section heading text or node. Omit for an unlabelled group. */
+    heading?: React.ReactNode;
+    /** Supporting text shown under the heading. */
+    description?: React.ReactNode;
+    /** Trailing action aligned to the heading row (e.g. an IconButton). */
+    action?: React.ReactNode;
+    gap?: Gap;
+}
+/** Compact section with optional heading, description and trailing action. */
+declare function Section({ className, heading, description, action, gap, children, ...props }: SectionProps): react_jsx_runtime.JSX.Element;
+interface DividerProps extends React.ComponentProps<typeof Separator> {
+    /** Vertical spacing around a horizontal divider. */
+    spacing?: "none" | "sm" | "md";
+}
+/** Compact divider built on the Separator primitive. */
+declare function Divider({ className, orientation, spacing, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+
+export { Divider, type DividerProps, Grid, type GridProps, Inline, type InlineProps, Section, type SectionProps, Stack, type StackProps, WidgetContent, type WidgetContentProps };

package/dist/components/dashboard/layout.d.ts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from '../ui/separator.js';
+import { Gap } from './spacing.js';
+import 'radix-ui';
+
+declare const widgetContentVariants: (props?: ({
+    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+    scroll?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface WidgetContentProps extends React.ComponentProps<"div">, VariantProps<typeof widgetContentVariants> {
+    /**
+     * Apply the glass token scope so surfaces read as translucent on the
+     * frosted dashboard tile. On by default; set `false` for solid full
+     * plugin views (outside a dashboard tile).
+     */
+    glass?: boolean;
+}
+/** Full-height widget content frame with standard padding + a container query. */
+declare function WidgetContent({ className, padding, scroll, glass, ...props }: WidgetContentProps): react_jsx_runtime.JSX.Element;
+declare const alignClass: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+};
+declare const justifyClass: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+    readonly around: "justify-around";
+};
+interface StackProps extends React.ComponentProps<"div"> {
+    gap?: Gap;
+    align?: keyof typeof alignClass;
+    justify?: keyof typeof justifyClass;
+    /**
+     * Grow to fill the remaining height of a flex parent (e.g. the top-level
+     * Stack under `WidgetContent`, so a nested `scroll` region can bound).
+     */
+    fill?: boolean;
+    /** Fill remaining height and scroll overflow. Use for the main content flow. */
+    scroll?: boolean;
+}
+/** Vertical layout with semantic spacing, alignment and optional scrolling. */
+declare function Stack({ className, gap, align, justify, fill, scroll, ...props }: StackProps): react_jsx_runtime.JSX.Element;
+interface InlineProps extends React.ComponentProps<"div"> {
+    gap?: Gap;
+    align?: keyof typeof alignClass;
+    justify?: keyof typeof justifyClass;
+    wrap?: boolean;
+}
+/** Horizontal layout with semantic spacing, alignment, wrap and justify. */
+declare function Inline({ className, gap, align, justify, wrap, ...props }: InlineProps): react_jsx_runtime.JSX.Element;
+declare const columnsClass: {
+    readonly 1: "grid-cols-1";
+    readonly 2: "grid-cols-2";
+    readonly 3: "grid-cols-3";
+    readonly 4: "grid-cols-4";
+};
+interface GridProps extends React.ComponentProps<"div"> {
+    /** Fixed column count, or `auto` for a responsive min-width fill. */
+    columns?: keyof typeof columnsClass | "auto";
+    gap?: Gap;
+    /** Minimum column width for `columns="auto"`. */
+    minColumnWidth?: number;
+}
+/** Responsive grid with bounded columns for metric and summary layouts. */
+declare function Grid({ className, columns, gap, minColumnWidth, style, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+interface SectionProps extends React.ComponentProps<"div"> {
+    /** Section heading text or node. Omit for an unlabelled group. */
+    heading?: React.ReactNode;
+    /** Supporting text shown under the heading. */
+    description?: React.ReactNode;
+    /** Trailing action aligned to the heading row (e.g. an IconButton). */
+    action?: React.ReactNode;
+    gap?: Gap;
+}
+/** Compact section with optional heading, description and trailing action. */
+declare function Section({ className, heading, description, action, gap, children, ...props }: SectionProps): react_jsx_runtime.JSX.Element;
+interface DividerProps extends React.ComponentProps<typeof Separator> {
+    /** Vertical spacing around a horizontal divider. */
+    spacing?: "none" | "sm" | "md";
+}
+/** Compact divider built on the Separator primitive. */
+declare function Divider({ className, orientation, spacing, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+
+export { Divider, type DividerProps, Grid, type GridProps, Inline, type InlineProps, Section, type SectionProps, Stack, type StackProps, WidgetContent, type WidgetContentProps };

package/dist/components/dashboard/layout.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Separator } from "../ui/separator";
+import { gapClass } from "./spacing";
+const widgetContentVariants = cva(
+  // Full-height frame with a container-query boundary so child components can
+  // respond to the widget's own size rather than the viewport.
+  "@container/widget flex h-full min-h-0 flex-col",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        md: "p-3",
+        lg: "p-4"
+      },
+      scroll: {
+        true: "overflow-auto",
+        false: "overflow-hidden"
+      }
+    },
+    defaultVariants: { padding: "md", scroll: false }
+  }
+);
+function WidgetContent({
+  className,
+  padding,
+  scroll,
+  glass = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "widget-content",
+      className: cn(widgetContentVariants({ padding, scroll }), glass && "glass", className),
+      ...props
+    }
+  );
+}
+const alignClass = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+const justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+function Stack({
+  className,
+  gap = "sm",
+  align,
+  justify,
+  fill = false,
+  scroll = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "stack",
+      className: cn(
+        "flex flex-col",
+        gapClass[gap],
+        align && alignClass[align],
+        justify && justifyClass[justify],
+        (fill || scroll) && "min-h-0 flex-1",
+        scroll && "overflow-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Inline({
+  className,
+  gap = "sm",
+  align = "center",
+  justify,
+  wrap = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "inline",
+      className: cn(
+        "flex flex-row",
+        gapClass[gap],
+        alignClass[align],
+        justify && justifyClass[justify],
+        wrap ? "flex-wrap" : "min-w-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const columnsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+function Grid({
+  className,
+  columns = "auto",
+  gap = "sm",
+  minColumnWidth = 120,
+  style,
+  ...props
+}) {
+  const auto = columns === "auto";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "grid",
+      className: cn(
+        "grid",
+        gapClass[gap],
+        !auto && columnsClass[columns],
+        className
+      ),
+      style: auto ? {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}px, 1fr))`,
+        ...style
+      } : style,
+      ...props
+    }
+  );
+}
+function Section({
+  className,
+  heading,
+  description,
+  action,
+  gap = "sm",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "section",
+      className: cn("flex flex-col", gapClass[gap], className),
+      ...props,
+      children: [
+        (heading || action) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            heading && /* @__PURE__ */ jsx("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            description && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
+          ] }),
+          action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+const dividerSpacing = { none: "my-0", sm: "my-1", md: "my-2" };
+function Divider({
+  className,
+  orientation = "horizontal",
+  spacing = "sm",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "divider",
+      orientation,
+      className: cn(
+        orientation === "horizontal" ? dividerSpacing[spacing] : "mx-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Divider,
+  Grid,
+  Inline,
+  Section,
+  Stack,
+  WidgetContent
+};

package/dist/components/dashboard/metric.cjs

@@ -0,0 +1,98 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _utils = require('../../lib/utils');
+var _typography = require('./typography');
+var _tone = require('./tone');
+var _layout = require('./layout');
+const trendIcon = {
+  up: _lucidereact.ArrowUp,
+  down: _lucidereact.ArrowDown,
+  flat: _lucidereact.ArrowRight
+};
+function Metric({
+  className,
+  label,
+  value,
+  icon,
+  supporting,
+  trend,
+  tone,
+  orientation = "vertical",
+  ...props
+}) {
+  const TrendIcon = trend ? trendIcon[trend.direction] : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "metric",
+      className: _utils.cn.call(void 0, 
+        "flex min-w-0",
+        orientation === "vertical" ? "flex-col gap-0.5" : "items-center justify-between gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon, size: "sm" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-baseline gap-1.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: _utils.cn.call(void 0, 
+                "text-lg font-semibold leading-none tabular-nums",
+                tone ? _tone.toneColor[tone] : "text-[var(--text-primary)]"
+              ),
+              children: value
+            }
+          ),
+          trend && TrendIcon && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "span",
+            {
+              className: _utils.cn.call(void 0, 
+                "inline-flex items-center gap-0.5 text-xs font-medium tabular-nums",
+                trend.tone ? _tone.toneColor[trend.tone] : "text-[var(--text-muted)]"
+              ),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrendIcon, { className: "size-3", "aria-hidden": true }),
+                trend.value
+              ]
+            }
+          )
+        ] }),
+        supporting && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-xs text-[var(--text-muted)]", children: supporting })
+      ]
+    }
+  );
+}
+function MetricCard({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "metric-card",
+      className: _utils.cn.call(void 0, 
+        "flex min-w-0 flex-col rounded-lg border border-[var(--surface-line)] bg-[var(--surface-raised)] p-3 shadow-[inset_0_1px_0_var(--surface-rim)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MetricGroup({ columns = "auto", gap = "sm", minColumnWidth = 96, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _layout.Grid,
+    {
+      "data-slot": "metric-group",
+      columns,
+      gap,
+      minColumnWidth,
+      ...props
+    }
+  );
+}
+
+
+
+
+exports.Metric = Metric; exports.MetricCard = MetricCard; exports.MetricGroup = MetricGroup;

package/dist/components/dashboard/metric.d.cts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.cjs';
+import { GridProps } from './layout.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/separator.cjs';
+import 'radix-ui';
+import './spacing.cjs';
+
+interface MetricTrend {
+    direction: "up" | "down" | "flat";
+    /** Change label, e.g. "+12%". */
+    value?: React.ReactNode;
+    /** Colour of the trend. Defaults to neutral — "up" is not always good. */
+    tone?: Tone;
+}
+interface MetricProps extends Omit<React.ComponentProps<"div">, "title"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Leading icon component (e.g. a lucide-react icon). */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Supporting text under the value. */
+    supporting?: React.ReactNode;
+    trend?: MetricTrend;
+    /** Semantic colour for the value. */
+    tone?: Tone;
+    /** Vertical (default) or horizontal label/value arrangement. */
+    orientation?: "vertical" | "horizontal";
+}
+/** A single label + value metric, usable inline or inside a MetricCard. */
+declare function Metric({ className, label, value, icon, supporting, trend, tone, orientation, ...props }: MetricProps): react_jsx_runtime.JSX.Element;
+interface MetricCardProps extends React.ComponentProps<"div"> {
+}
+/** A contained surface for a Metric (or any compact summary content). */
+declare function MetricCard({ className, ...props }: MetricCardProps): react_jsx_runtime.JSX.Element;
+interface MetricGroupProps extends GridProps {
+}
+/** Arranges multiple metrics responsively in a bounded grid. */
+declare function MetricGroup({ columns, gap, minColumnWidth, ...props }: MetricGroupProps): react_jsx_runtime.JSX.Element;
+
+export { Metric, MetricCard, type MetricCardProps, MetricGroup, type MetricGroupProps, type MetricProps, type MetricTrend };

package/dist/components/dashboard/metric.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.js';
+import { GridProps } from './layout.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/separator.js';
+import 'radix-ui';
+import './spacing.js';
+
+interface MetricTrend {
+    direction: "up" | "down" | "flat";
+    /** Change label, e.g. "+12%". */
+    value?: React.ReactNode;
+    /** Colour of the trend. Defaults to neutral — "up" is not always good. */
+    tone?: Tone;
+}
+interface MetricProps extends Omit<React.ComponentProps<"div">, "title"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Leading icon component (e.g. a lucide-react icon). */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Supporting text under the value. */
+    supporting?: React.ReactNode;
+    trend?: MetricTrend;
+    /** Semantic colour for the value. */
+    tone?: Tone;
+    /** Vertical (default) or horizontal label/value arrangement. */
+    orientation?: "vertical" | "horizontal";
+}
+/** A single label + value metric, usable inline or inside a MetricCard. */
+declare function Metric({ className, label, value, icon, supporting, trend, tone, orientation, ...props }: MetricProps): react_jsx_runtime.JSX.Element;
+interface MetricCardProps extends React.ComponentProps<"div"> {
+}
+/** A contained surface for a Metric (or any compact summary content). */
+declare function MetricCard({ className, ...props }: MetricCardProps): react_jsx_runtime.JSX.Element;
+interface MetricGroupProps extends GridProps {
+}
+/** Arranges multiple metrics responsively in a bounded grid. */
+declare function MetricGroup({ columns, gap, minColumnWidth, ...props }: MetricGroupProps): react_jsx_runtime.JSX.Element;
+
+export { Metric, MetricCard, type MetricCardProps, MetricGroup, type MetricGroupProps, type MetricProps, type MetricTrend };

package/dist/components/dashboard/metric.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Icon } from "./typography";
+import { toneColor } from "./tone";
+import { Grid } from "./layout";
+const trendIcon = {
+  up: ArrowUp,
+  down: ArrowDown,
+  flat: ArrowRight
+};
+function Metric({
+  className,
+  label,
+  value,
+  icon,
+  supporting,
+  trend,
+  tone,
+  orientation = "vertical",
+  ...props
+}) {
+  const TrendIcon = trend ? trendIcon[trend.direction] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "metric",
+      className: cn(
+        "flex min-w-0",
+        orientation === "vertical" ? "flex-col gap-0.5" : "items-center justify-between gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          icon && /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-lg font-semibold leading-none tabular-nums",
+                tone ? toneColor[tone] : "text-[var(--text-primary)]"
+              ),
+              children: value
+            }
+          ),
+          trend && TrendIcon && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-0.5 text-xs font-medium tabular-nums",
+                trend.tone ? toneColor[trend.tone] : "text-[var(--text-muted)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(TrendIcon, { className: "size-3", "aria-hidden": true }),
+                trend.value
+              ]
+            }
+          )
+        ] }),
+        supporting && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-[var(--text-muted)]", children: supporting })
+      ]
+    }
+  );
+}
+function MetricCard({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "metric-card",
+      className: cn(
+        "flex min-w-0 flex-col rounded-lg border border-[var(--surface-line)] bg-[var(--surface-raised)] p-3 shadow-[inset_0_1px_0_var(--surface-rim)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MetricGroup({ columns = "auto", gap = "sm", minColumnWidth = 96, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      "data-slot": "metric-group",
+      columns,
+      gap,
+      minColumnWidth,
+      ...props
+    }
+  );
+}
+export {
+  Metric,
+  MetricCard,
+  MetricGroup
+};