@wallarm-org/gen-ui 0.0.0-stage → 1.0.0

package/dist/components/HorizontalBarStack.d.ts

@@ -0,0 +1,39 @@
+import * as z from 'zod';
+export declare const HorizontalBarStackComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    value: z.ZodOptional<z.ZodNumber>;
+    format: z.ZodOptional<z.ZodEnum<{
+        bytes: "bytes";
+        compact: "compact";
+        ms: "ms";
+        number: "number";
+        percent: "percent";
+    }>>;
+    delta: z.ZodOptional<z.ZodObject<{
+        value: z.ZodNumber;
+        trend: z.ZodOptional<z.ZodEnum<{
+            down: "down";
+            up: "up";
+        }>>;
+        sentiment: z.ZodOptional<z.ZodEnum<{
+            negative: "negative";
+            neutral: "neutral";
+            positive: "positive";
+        }>>;
+    }, z.core.$strip>>;
+    total: z.ZodOptional<z.ZodNumber>;
+    legend: z.ZodOptional<z.ZodBoolean>;
+    items: z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        value: z.ZodNumber;
+        color: z.ZodOptional<z.ZodEnum<{
+            amber: "amber";
+            blue: "blue";
+            brand: "brand";
+            green: "green";
+            purple: "purple";
+            red: "red";
+            slate: "slate";
+        }>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>>;

package/dist/components/HorizontalBarStack.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Chart, ChartHeader, ChartTitle, HorizontalBarStack, HorizontalBarStackSkeleton, MetricDelta, MetricHeader, MetricValue } from "@wallarm-org/design-system/SimpleCharts";
+import { allOf, defineComponent } from "../core/define.js";
+import { formatNumber, numberFormat } from "../core/format.js";
+import { ChartSkeleton } from "../render/ChartSkeleton.js";
+import { CHART_COLORS } from "./BarList.js";
+import * as __rspack_external_zod from "zod";
+const TRENDS = allOf()([
+    'up',
+    'down'
+]);
+const SENTIMENTS = allOf()([
+    'positive',
+    'negative',
+    'neutral'
+]);
+const HorizontalBarStackComponent = defineComponent({
+    name: 'HorizontalBarStack',
+    description: 'One total split into a few named parts in a single 100% bar with a legend (incidents by severity, traffic by verdict). Use 2-6 parts; for a ranked list where each part needs its own row use BarList. value is the optional headline number above the bar; total > sum of parts leaves a grey remainder.',
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        value: __rspack_external_zod.number().optional(),
+        format: numberFormat,
+        delta: __rspack_external_zod.object({
+            value: __rspack_external_zod.number(),
+            trend: __rspack_external_zod["enum"](TRENDS).optional(),
+            sentiment: __rspack_external_zod["enum"](SENTIMENTS).optional()
+        }).optional(),
+        total: __rspack_external_zod.number().optional(),
+        legend: __rspack_external_zod.boolean().optional(),
+        items: __rspack_external_zod.array(__rspack_external_zod.object({
+            name: __rspack_external_zod.string(),
+            value: __rspack_external_zod.number(),
+            color: __rspack_external_zod["enum"](CHART_COLORS).optional()
+        }))
+    }),
+    Skeleton: ({ title })=>/*#__PURE__*/ jsx(ChartSkeleton, {
+            title: title,
+            children: /*#__PURE__*/ jsx(HorizontalBarStackSkeleton, {})
+        }),
+    View: ({ props })=>/*#__PURE__*/ jsxs(Chart, {
+            className: "h-full",
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: props.title
+                    })
+                }),
+                /*#__PURE__*/ jsx(HorizontalBarStack, {
+                    data: props.items,
+                    total: props.total,
+                    legend: props.legend,
+                    children: void 0 !== props.value && /*#__PURE__*/ jsxs(MetricHeader, {
+                        children: [
+                            /*#__PURE__*/ jsx(MetricValue, {
+                                children: formatNumber(props.value, props.format)
+                            }),
+                            props.delta && /*#__PURE__*/ jsx(MetricDelta, {
+                                ...props.delta
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+});
+export { HorizontalBarStackComponent };

package/dist/components/LineChart.d.ts

@@ -0,0 +1,36 @@
+import * as z from 'zod';
+export declare const LineChartComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    series: z.ZodArray<z.ZodObject<{
+        key: z.ZodString;
+        label: z.ZodString;
+        color: z.ZodOptional<z.ZodEnum<{
+            amber: "amber";
+            blue: "blue";
+            brand: "brand";
+            green: "green";
+            purple: "purple";
+            red: "red";
+            slate: "slate";
+        }>>;
+        variant: z.ZodOptional<z.ZodEnum<{
+            dashed: "dashed";
+            solid: "solid";
+        }>>;
+    }, z.core.$strip>>;
+    points: z.ZodArray<z.ZodObject<{
+        x: z.ZodString;
+    }, z.core.$catchall<z.ZodNullable<z.ZodNumber>>>>;
+    xFormat: z.ZodOptional<z.ZodEnum<{
+        date: "date";
+        datetime: "datetime";
+        time: "time";
+    }>>;
+    yFormat: z.ZodOptional<z.ZodEnum<{
+        bytes: "bytes";
+        compact: "compact";
+        ms: "ms";
+        number: "number";
+        percent: "percent";
+    }>>;
+}, z.core.$strip>>;

package/dist/components/LineChart.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Chart, ChartHeader, ChartTitle, LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis } from "@wallarm-org/design-system/SimpleCharts";
+import { allOf, defineComponent, seriesKey, unique } from "../core/define.js";
+import { formatNumber, formatTime, numberFormat, timeFormat } from "../core/format.js";
+import { ChartSkeleton } from "../render/ChartSkeleton.js";
+import { CHART_COLORS } from "./BarList.js";
+import * as __rspack_external_zod from "zod";
+const VARIANTS = allOf()([
+    'solid',
+    'dashed'
+]);
+const LineChartComponent = defineComponent({
+    name: 'LineChart',
+    description: "A time series: one or more lines over time (requests per hour, attacks per day). series lists the lines; each point is { x: ISO time, <series key>: number }, sorted by x ascending. A missing or null value leaves a gap. Use BarList for a ranking, Metric for a single number.",
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        series: __rspack_external_zod.array(__rspack_external_zod.object({
+            key: seriesKey.describe('The field in each point that holds this line’s value'),
+            label: __rspack_external_zod.string(),
+            color: __rspack_external_zod["enum"](CHART_COLORS).optional(),
+            variant: __rspack_external_zod["enum"](VARIANTS).optional().describe('dashed for a baseline or forecast')
+        })).refine(unique('key'), 'series keys must be unique'),
+        points: __rspack_external_zod.array(__rspack_external_zod.object({
+            x: __rspack_external_zod.string()
+        }).catchall(__rspack_external_zod.number().nullable())),
+        xFormat: timeFormat,
+        yFormat: numberFormat
+    }),
+    Skeleton: ({ title })=>/*#__PURE__*/ jsx(ChartSkeleton, {
+            title: title
+        }),
+    View: ({ props })=>{
+        const { series, points } = props;
+        const formatX = (value)=>formatTime(String(value), props.xFormat);
+        const formatY = (value)=>'number' == typeof value ? formatNumber(value, props.yFormat) : '—';
+        const tooltip = ({ rows, xValue })=>/*#__PURE__*/ jsxs(LineChartHoverPopover, {
+                children: [
+                    /*#__PURE__*/ jsx(LineChartHoverPopoverTimestamp, {
+                        children: formatX(xValue)
+                    }),
+                    rows.map((row)=>/*#__PURE__*/ jsx(LineChartHoverPopoverRow, {
+                            series: row.series,
+                            value: row.value,
+                            formatValue: formatY
+                        }, row.series.key))
+                ]
+            });
+        return /*#__PURE__*/ jsxs(Chart, {
+            className: "h-full",
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: props.title
+                    })
+                }),
+                0 === points.length || 0 === series.length ? /*#__PURE__*/ jsx(LineChartEmpty, {
+                    children: "No data"
+                }) : /*#__PURE__*/ jsxs(LineChart, {
+                    data: points,
+                    series: series,
+                    xKey: "x",
+                    children: [
+                        series.length > 1 && /*#__PURE__*/ jsx(LineChartLegend, {
+                            children: series.map((s)=>/*#__PURE__*/ jsxs(LineChartLegendItem, {
+                                    seriesKey: s.key,
+                                    children: [
+                                        /*#__PURE__*/ jsx(LineChartHoverPopoverDot, {
+                                            color: s.color
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "font-mono text-xs text-text-primary",
+                                            children: s.label
+                                        })
+                                    ]
+                                }, s.key))
+                        }),
+                        /*#__PURE__*/ jsxs(LineChartBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(LineChartGrid, {}),
+                                /*#__PURE__*/ jsx(LineChartXAxis, {
+                                    tickFormatter: formatX,
+                                    density: "normal"
+                                }),
+                                /*#__PURE__*/ jsx(LineChartYAxis, {
+                                    tickFormatter: formatY
+                                }),
+                                series.map((s)=>/*#__PURE__*/ jsx(LineChartLine, {
+                                        seriesKey: s.key
+                                    }, s.key)),
+                                /*#__PURE__*/ jsx(LineChartTooltip, {
+                                    children: tooltip
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});
+export { LineChartComponent };

package/dist/components/Metric.d.ts

@@ -0,0 +1,35 @@
+import * as z from 'zod';
+export declare const MetricComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    value: z.ZodNumber;
+    format: z.ZodOptional<z.ZodEnum<{
+        bytes: "bytes";
+        compact: "compact";
+        ms: "ms";
+        number: "number";
+        percent: "percent";
+    }>>;
+    caption: z.ZodOptional<z.ZodString>;
+    delta: z.ZodOptional<z.ZodObject<{
+        value: z.ZodNumber;
+        trend: z.ZodOptional<z.ZodEnum<{
+            down: "down";
+            up: "up";
+        }>>;
+        sentiment: z.ZodOptional<z.ZodEnum<{
+            negative: "negative";
+            neutral: "neutral";
+            positive: "positive";
+        }>>;
+    }, z.core.$strip>>;
+    sparkline: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        x: z.ZodString;
+        y: z.ZodNumber;
+    }, z.core.$strip>>>;
+    sparklineColor: z.ZodOptional<z.ZodEnum<{
+        brand: "brand";
+        negative: "negative";
+        neutral: "neutral";
+        positive: "positive";
+    }>>;
+}, z.core.$strip>>;

package/dist/components/Metric.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Chart, ChartHeader, ChartTitle, Metric, MetricCaption, MetricDelta, MetricHeader, MetricSkeleton, MetricSparkline, MetricValue } from "@wallarm-org/design-system/SimpleCharts";
+import { allOf, defineComponent } from "../core/define.js";
+import { formatNumber, numberFormat } from "../core/format.js";
+import { ChartSkeleton } from "../render/ChartSkeleton.js";
+import * as __rspack_external_zod from "zod";
+const TRENDS = allOf()([
+    'up',
+    'down'
+]);
+const SPARKLINE_COLORS = allOf()([
+    'brand',
+    'positive',
+    'negative',
+    'neutral'
+]);
+const SENTIMENTS = allOf()([
+    'positive',
+    'negative',
+    'neutral'
+]);
+const MetricComponent = defineComponent({
+    name: 'Metric',
+    description: 'One headline number on a card (a KPI tile), optionally with its change. sentiment is the meaning (an increase in attacks is negative), trend is the arrow. Add sparkline for the trend over the period.',
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        value: __rspack_external_zod.number(),
+        format: numberFormat,
+        caption: __rspack_external_zod.string().optional(),
+        delta: __rspack_external_zod.object({
+            value: __rspack_external_zod.number(),
+            trend: __rspack_external_zod["enum"](TRENDS).optional(),
+            sentiment: __rspack_external_zod["enum"](SENTIMENTS).optional()
+        }).optional(),
+        sparkline: __rspack_external_zod.array(__rspack_external_zod.object({
+            x: __rspack_external_zod.string(),
+            y: __rspack_external_zod.number()
+        })).optional().describe('Trend over the period: points oldest first, x is an ISO time, y the value'),
+        sparklineColor: __rspack_external_zod["enum"](SPARKLINE_COLORS).optional().describe('Match it to the delta sentiment; brand by default')
+    }),
+    Skeleton: ({ title })=>/*#__PURE__*/ jsx(ChartSkeleton, {
+            title: title,
+            children: /*#__PURE__*/ jsx(MetricSkeleton, {})
+        }),
+    View: ({ props })=>/*#__PURE__*/ jsx("div", {
+            className: "h-full min-w-0 flex-1",
+            children: /*#__PURE__*/ jsxs(Chart, {
+                className: "h-full",
+                children: [
+                    /*#__PURE__*/ jsx(ChartHeader, {
+                        children: /*#__PURE__*/ jsx(ChartTitle, {
+                            children: props.title
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Metric, {
+                        children: [
+                            /*#__PURE__*/ jsxs(MetricHeader, {
+                                children: [
+                                    /*#__PURE__*/ jsx(MetricValue, {
+                                        children: formatNumber(props.value, props.format)
+                                    }),
+                                    props.delta && /*#__PURE__*/ jsx(MetricDelta, {
+                                        ...props.delta
+                                    })
+                                ]
+                            }),
+                            props.caption && /*#__PURE__*/ jsx(MetricCaption, {
+                                children: props.caption
+                            })
+                        ]
+                    }),
+                    props.sparkline && /*#__PURE__*/ jsx(MetricSparkline, {
+                        data: props.sparkline.map((p)=>({
+                                x: p.x,
+                                value: p.y
+                            })),
+                        color: props.sparklineColor,
+                        label: props.title,
+                        formatValue: (v)=>formatNumber(v, props.format)
+                    })
+                ]
+            })
+        })
+});
+export { MetricComponent };

package/dist/components/PieChart.d.ts

@@ -0,0 +1,25 @@
+import * as z from 'zod';
+export declare const PieChartComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    format: z.ZodOptional<z.ZodEnum<{
+        bytes: "bytes";
+        compact: "compact";
+        ms: "ms";
+        number: "number";
+        percent: "percent";
+    }>>;
+    centerLabel: z.ZodOptional<z.ZodString>;
+    items: z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodNumber;
+        color: z.ZodOptional<z.ZodEnum<{
+            amber: "amber";
+            blue: "blue";
+            brand: "brand";
+            green: "green";
+            purple: "purple";
+            red: "red";
+            slate: "slate";
+        }>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>>;

package/dist/components/PieChart.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Chart, ChartHeader, ChartTitle, LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton } from "@wallarm-org/design-system/SimpleCharts";
+import { defineComponent, unique } from "../core/define.js";
+import { formatNumber, numberFormat } from "../core/format.js";
+import { ChartSkeleton } from "../render/ChartSkeleton.js";
+import { CHART_COLORS } from "./BarList.js";
+import * as __rspack_external_zod from "zod";
+const PieChartComponent = defineComponent({
+    name: 'PieChart',
+    description: 'A donut with a legend for the share of a whole (attack types, response status codes, traffic sources) where the parts add up to a meaningful total; 2-6 slices read best. Use BarList instead to compare magnitudes or rank many rows. items: unique labels, values are counts (percents are computed). centerLabel names the total in the middle, e.g. "requests".',
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        format: numberFormat,
+        centerLabel: __rspack_external_zod.string().optional(),
+        items: __rspack_external_zod.array(__rspack_external_zod.object({
+            label: __rspack_external_zod.string(),
+            value: __rspack_external_zod.number(),
+            color: __rspack_external_zod["enum"](CHART_COLORS).optional()
+        })).refine(unique('label'), 'labels must be unique')
+    }),
+    Skeleton: ({ title })=>/*#__PURE__*/ jsx(ChartSkeleton, {
+            title: title,
+            children: /*#__PURE__*/ jsx(PieChartSkeleton, {})
+        }),
+    View: ({ props })=>{
+        const { items } = props;
+        const data = items.map((item)=>({
+                name: item.label,
+                value: item.value,
+                color: item.color
+            }));
+        const total = items.reduce((sum, item)=>sum + Math.max(0, item.value), 0);
+        const formatHovered = (datum)=>formatNumber(datum.value, props.format);
+        return /*#__PURE__*/ jsxs(Chart, {
+            className: "h-full",
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: props.title
+                    })
+                }),
+                /*#__PURE__*/ jsxs(PieChart, {
+                    data: data,
+                    children: [
+                        /*#__PURE__*/ jsx(PieChartDonut, {
+                            children: /*#__PURE__*/ jsxs(PieChartCenter, {
+                                children: [
+                                    /*#__PURE__*/ jsx(PieChartCenterValue, {
+                                        formatHoveredValue: formatHovered,
+                                        children: formatNumber(total, props.format)
+                                    }),
+                                    props.centerLabel && /*#__PURE__*/ jsx(PieChartCenterLabel, {
+                                        className: "whitespace-nowrap",
+                                        children: props.centerLabel
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(PieChartLegend, {
+                            children: items.map((item)=>/*#__PURE__*/ jsxs(PieChartLegendItem, {
+                                    name: item.label,
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "min-w-0 flex-1 truncate text-xs text-text-primary",
+                                            children: item.label
+                                        }),
+                                        /*#__PURE__*/ jsxs(PieChartLegendValue, {
+                                            children: [
+                                                formatNumber(item.value, props.format),
+                                                /*#__PURE__*/ jsx(LegendDot, {}),
+                                                /*#__PURE__*/ jsx(PieChartLegendPercent, {})
+                                            ]
+                                        })
+                                    ]
+                                }, item.label))
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});
+export { PieChartComponent };

package/dist/components/Section.d.ts

@@ -0,0 +1,5 @@
+import * as z from 'zod';
+export declare const SectionComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    subtitle: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>>;

package/dist/components/Section.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "@wallarm-org/design-system/Heading";
+import { VStack } from "@wallarm-org/design-system/Stack";
+import { Text } from "@wallarm-org/design-system/Text";
+import { defineComponent } from "../core/define.js";
+import * as __rspack_external_zod from "zod";
+const SectionComponent = defineComponent({
+    name: 'Section',
+    description: 'A titled block of a page or dashboard: a heading, an optional one-line subtitle, then its children. Use one per topic (Traffic, Threats, Endpoints).',
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        subtitle: __rspack_external_zod.string().optional()
+    }),
+    hasChildren: true,
+    View: ({ props, children })=>/*#__PURE__*/ jsxs(VStack, {
+            gap: 12,
+            align: "stretch",
+            fullWidth: true,
+            children: [
+                /*#__PURE__*/ jsxs(VStack, {
+                    gap: 2,
+                    align: "start",
+                    children: [
+                        /*#__PURE__*/ jsx(Heading, {
+                            size: "lg",
+                            weight: "medium",
+                            children: props.title
+                        }),
+                        props.subtitle && /*#__PURE__*/ jsx(Text, {
+                            color: "secondary",
+                            children: props.subtitle
+                        })
+                    ]
+                }),
+                children
+            ]
+        })
+});
+export { SectionComponent };

package/dist/components/Stack.d.ts

@@ -0,0 +1,18 @@
+import * as z from 'zod';
+import { type StackProps } from '@wallarm-org/design-system/Stack';
+/** The gaps the catalog offers, each mapped to a DS gap: a gap the DS drops fails typecheck. */
+export declare const GAPS: readonly ['4', '8', '12', '16', '24'];
+export declare const GAP: Record<(typeof GAPS)[number], NonNullable<StackProps['gap']>>;
+export declare const StackComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    direction: z.ZodOptional<z.ZodEnum<{
+        column: "column";
+        row: "row";
+    }>>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        12: "12";
+        16: "16";
+        24: "24";
+        4: "4";
+        8: "8";
+    }>>;
+}, z.core.$strip>>;

package/dist/components/Stack.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Stack } from "@wallarm-org/design-system/Stack";
+import { defineComponent } from "../core/define.js";
+import * as __rspack_external_zod from "zod";
+const GAPS = [
+    '4',
+    '8',
+    '12',
+    '16',
+    '24'
+];
+const GAP = {
+    4: 4,
+    8: 8,
+    12: 12,
+    16: 16,
+    24: 24
+};
+const StackComponent = defineComponent({
+    name: 'Stack',
+    description: 'Lays children out in a row or a column. Use a row for side-by-side metrics.',
+    props: __rspack_external_zod.object({
+        direction: __rspack_external_zod["enum"]([
+            'row',
+            'column'
+        ]).optional().describe('Default column'),
+        gap: __rspack_external_zod["enum"](GAPS).optional().describe('Space between children, px. Default 12')
+    }),
+    hasChildren: true,
+    View: ({ props, children })=>{
+        const direction = props.direction ?? 'column';
+        return /*#__PURE__*/ jsx(Stack, {
+            direction: direction,
+            gap: GAP[props.gap ?? '12'],
+            wrap: 'row' === direction ? 'wrap' : 'nowrap',
+            fullWidth: true,
+            children: children
+        });
+    }
+});
+export { GAP, GAPS, StackComponent };

package/dist/components/Table.d.ts

@@ -0,0 +1,30 @@
+import * as z from 'zod';
+export declare const TableComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodOptional<z.ZodString>;
+    rowKey: z.ZodString;
+    columns: z.ZodArray<z.ZodObject<{
+        key: z.ZodString;
+        header: z.ZodString;
+        type: z.ZodOptional<z.ZodEnum<{
+            badge: "badge";
+            code: "code";
+            datetime: "datetime";
+            ip: "ip";
+            method: "method";
+            number: "number";
+            status: "status";
+            text: "text";
+        }>>;
+        format: z.ZodOptional<z.ZodEnum<{
+            bytes: "bytes";
+            compact: "compact";
+            date: "date";
+            datetime: "datetime";
+            ms: "ms";
+            number: "number";
+            percent: "percent";
+            relative: "relative";
+        }>>;
+    }, z.core.$strip>>;
+    rows: z.ZodArray<z.ZodObject<{}, z.core.$loose>>;
+}, z.core.$strip>>;