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

package/dist/components/AreaChart.d.ts

@@ -0,0 +1,36 @@
+import * as z from 'zod';
+export declare const AreaChartComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    variant: z.ZodOptional<z.ZodEnum<{
+        stacked: "stacked";
+        standard: "standard";
+    }>>;
+    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";
+        }>>;
+    }, 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/AreaChart.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AreaChart, AreaChartArea, AreaChartBody, Chart, ChartHeader, ChartTitle, LineChartEmpty, LineChartGrid, LineChartHoverPopoverDot, LineChartLegend, LineChartLegendItem, 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()([
+    'stacked',
+    'standard'
+]);
+const AreaChartComponent = defineComponent({
+    name: 'AreaChart',
+    description: "Volume over time drawn with filled areas: stacked to show how series add up to a total (traffic by verdict), standard to overlay series that should not be summed. series lists the areas; each point is { x: ISO time, <series key>: number }, sorted by x ascending. null means no value for that series at that x.",
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        variant: __rspack_external_zod["enum"](VARIANTS).optional().describe('stacked (default) sums the series; standard overlays them from zero'),
+        series: __rspack_external_zod.array(__rspack_external_zod.object({
+            key: seriesKey.describe('The field in each point that holds this area’s value'),
+            label: __rspack_external_zod.string(),
+            color: __rspack_external_zod["enum"](CHART_COLORS).optional()
+        })).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) : '—';
+        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(AreaChart, {
+                    data: points,
+                    series: series,
+                    xKey: "x",
+                    variant: props.variant,
+                    children: [
+                        /*#__PURE__*/ jsx(LineChartLegend, {
+                            children: series.map((s)=>/*#__PURE__*/ jsxs(LineChartLegendItem, {
+                                    seriesKey: s.key,
+                                    children: [
+                                        /*#__PURE__*/ jsx(LineChartHoverPopoverDot, {
+                                            color: s.color
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-xs font-mono text-text-primary",
+                                            children: s.label
+                                        })
+                                    ]
+                                }, s.key))
+                        }),
+                        /*#__PURE__*/ jsxs(AreaChartBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(LineChartGrid, {}),
+                                /*#__PURE__*/ jsx(LineChartXAxis, {
+                                    tickFormatter: formatX,
+                                    density: "normal"
+                                }),
+                                /*#__PURE__*/ jsx(LineChartYAxis, {
+                                    tickFormatter: formatY
+                                }),
+                                series.map((s)=>/*#__PURE__*/ jsx(AreaChartArea, {
+                                        seriesKey: s.key
+                                    }, s.key)),
+                                /*#__PURE__*/ jsx(LineChartTooltip, {
+                                    xTickFormatter: formatX
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});
+export { AreaChartComponent };

package/dist/components/Badge.d.ts

@@ -0,0 +1,11 @@
+import * as z from 'zod';
+export declare const BadgeComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    text: z.ZodString;
+    color: z.ZodOptional<z.ZodEnum<{
+        amber: "amber";
+        blue: "blue";
+        green: "green";
+        red: "red";
+        slate: "slate";
+    }>>;
+}, z.core.$strip>>;

package/dist/components/Badge.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Badge } from "@wallarm-org/design-system/Badge";
+import { Skeleton } from "@wallarm-org/design-system/Skeleton";
+import { defineComponent, subsetOf } from "../core/define.js";
+import * as __rspack_external_zod from "zod";
+const BadgeComponent = defineComponent({
+    name: 'Badge',
+    description: 'A short status label, e.g. a severity or an attack type.',
+    props: __rspack_external_zod.object({
+        text: __rspack_external_zod.string(),
+        color: __rspack_external_zod["enum"](subsetOf()([
+            'slate',
+            'red',
+            'amber',
+            'green',
+            'blue'
+        ])).optional()
+    }),
+    Skeleton: ()=>/*#__PURE__*/ jsx(Skeleton, {
+            width: "64px",
+            height: "20px",
+            transparent: false
+        }),
+    View: ({ props })=>/*#__PURE__*/ jsx(Badge, {
+            type: "secondary",
+            color: props.color ?? 'slate',
+            children: props.text
+        })
+});
+export { BadgeComponent };

package/dist/components/BarList.d.ts

@@ -0,0 +1,26 @@
+import * as z from 'zod';
+/** The chart palette the catalog offers; shared by every chart entry. */
+export declare const CHART_COLORS: readonly ["brand", "blue", "green", "red", "amber", "purple", "slate"];
+export declare const BarListComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    title: z.ZodString;
+    format: z.ZodOptional<z.ZodEnum<{
+        bytes: "bytes";
+        compact: "compact";
+        ms: "ms";
+        number: "number";
+        percent: "percent";
+    }>>;
+    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/BarList.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartHeader, ChartTitle } from "@wallarm-org/design-system/SimpleCharts";
+import { defineComponent, subsetOf, unique } 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 CHART_COLORS = subsetOf()([
+    'brand',
+    'blue',
+    'green',
+    'red',
+    'amber',
+    'purple',
+    'slate'
+]);
+const BarListComponent = defineComponent({
+    name: 'BarList',
+    description: 'A ranked top-N breakdown (endpoints, IPs, attack types). Send rows sorted.',
+    props: __rspack_external_zod.object({
+        title: __rspack_external_zod.string(),
+        format: numberFormat,
+        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(BarListSkeleton, {})
+        }),
+    View: ({ props })=>{
+        const { items } = props;
+        return /*#__PURE__*/ jsxs(Chart, {
+            className: "h-full",
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: props.title
+                    })
+                }),
+                /*#__PURE__*/ jsx(BarList, {
+                    max: items.reduce((sum, item)=>sum + item.value, 0),
+                    children: items.map((item)=>/*#__PURE__*/ jsxs(BarListItem, {
+                            value: item.value,
+                            children: [
+                                /*#__PURE__*/ jsx(BarListBar, {
+                                    color: item.color
+                                }),
+                                /*#__PURE__*/ jsx(BarListLabel, {
+                                    children: item.label
+                                }),
+                                /*#__PURE__*/ jsxs(BarListValue, {
+                                    children: [
+                                        formatNumber(item.value, props.format),
+                                        /*#__PURE__*/ jsx(BarListPercent, {})
+                                    ]
+                                })
+                            ]
+                        }, item.label))
+                })
+            ]
+        });
+    }
+});
+export { BarListComponent, CHART_COLORS };

package/dist/components/Button.d.ts

@@ -0,0 +1,10 @@
+import * as z from 'zod';
+export declare const ButtonComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    label: z.ZodString;
+    variant: z.ZodOptional<z.ZodEnum<{
+        ghost: "ghost";
+        outline: "outline";
+        primary: "primary";
+    }>>;
+    destructive: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>>;

package/dist/components/Button.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@wallarm-org/design-system/Button";
+import { Skeleton } from "@wallarm-org/design-system/Skeleton";
+import { defineComponent, subsetOf } from "../core/define.js";
+import * as __rspack_external_zod from "zod";
+const VARIANTS = subsetOf()([
+    'primary',
+    'outline',
+    'ghost'
+]);
+const COLOR = {
+    primary: 'brand',
+    outline: 'neutral',
+    ghost: 'neutral'
+};
+const ButtonComponent = defineComponent({
+    name: 'Button',
+    description: 'Asks the app to do something. The app runs the action; side effects still go through approval.',
+    props: __rspack_external_zod.object({
+        label: __rspack_external_zod.string(),
+        variant: __rspack_external_zod["enum"](VARIANTS).optional(),
+        destructive: __rspack_external_zod.boolean().optional()
+    }),
+    events: [
+        'press'
+    ],
+    Skeleton: ()=>/*#__PURE__*/ jsx(Skeleton, {
+            width: "120px",
+            height: "36px",
+            rounded: 8,
+            transparent: false
+        }),
+    View: ({ props, emit })=>/*#__PURE__*/ jsx(Button, {
+            variant: props.variant ?? 'outline',
+            color: props.destructive ? 'destructive' : COLOR[props.variant ?? 'outline'],
+            onClick: ()=>emit('press'),
+            children: props.label
+        })
+});
+export { ButtonComponent };

package/dist/components/Card.d.ts

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

package/dist/components/Card.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Card, CardContent } from "@wallarm-org/design-system/Card";
+import { defineComponent } from "../core/define.js";
+import * as __rspack_external_zod from "zod";
+const CardComponent = defineComponent({
+    name: 'Card',
+    description: 'A bordered surface that groups related content.',
+    props: __rspack_external_zod.object({}),
+    hasChildren: true,
+    View: ({ children })=>/*#__PURE__*/ jsx(Card, {
+            className: "h-full",
+            children: /*#__PURE__*/ jsx(CardContent, {
+                children: children
+            })
+        })
+});
+export { CardComponent };

package/dist/components/ColumnChart.d.ts

@@ -0,0 +1,32 @@
+import * as z from 'zod';
+export declare const ColumnChartComponent: 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";
+        }>>;
+    }, 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/ColumnChart.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Chart, ChartHeader, ChartTitle, ColumnChart, ColumnChartBody, ColumnChartStack, ColumnChartXAxis, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartTooltip, LineChartYAxis } from "@wallarm-org/design-system/SimpleCharts";
+import { 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 X_KEY = '__x';
+const ColumnChartComponent = defineComponent({
+    name: 'ColumnChart',
+    description: "Vertical columns, one per time bucket or category (attacks per hour, requests per day), each split into its series stacked with the first series on top; one series gives plain columns. series lists the stacks; each point is { x: ISO time or category label, <series key>: number }, sorted by x. A missing or null value counts as 0. Set xFormat when x is an ISO time; leave it out for category labels.",
+    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 series’ value'),
+            label: __rspack_external_zod.string(),
+            color: __rspack_external_zod["enum"](CHART_COLORS).optional()
+        })).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 = (index)=>{
+            const x = points[Number(index)]?.x ?? '';
+            return props.xFormat ? formatTime(x, props.xFormat) : x;
+        };
+        const formatValue = (value)=>formatNumber(Number(value ?? 0), props.yFormat);
+        const valueAt = (point, key)=>{
+            const value = point[key];
+            return 'number' == typeof value ? value : 0;
+        };
+        const data = points.map((point, index)=>{
+            const datum = {
+                [X_KEY]: index
+            };
+            for (const s of series)datum[s.key] = valueAt(point, s.key);
+            return datum;
+        });
+        const renderTooltip = ({ rows, xValue })=>/*#__PURE__*/ jsxs(LineChartHoverPopover, {
+                children: [
+                    /*#__PURE__*/ jsx(LineChartHoverPopoverTimestamp, {
+                        children: formatX(xValue)
+                    }),
+                    rows.map((row)=>/*#__PURE__*/ jsx(LineChartHoverPopoverRow, {
+                            series: row.series,
+                            value: formatValue(row.value)
+                        }, row.series.key))
+                ]
+            });
+        return /*#__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(ColumnChart, {
+                        data: data,
+                        series: series,
+                        xKey: X_KEY,
+                        children: [
+                            /*#__PURE__*/ jsx(LineChartLegend, {
+                                children: series.map((s)=>/*#__PURE__*/ jsxs(LineChartLegendItem, {
+                                        seriesKey: s.key,
+                                        children: [
+                                            /*#__PURE__*/ jsx(LineChartHoverPopoverDot, {
+                                                color: s.color
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text-xs font-mono text-text-primary",
+                                                children: s.label
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text-xs font-mono font-medium text-text-primary",
+                                                children: formatValue(points.reduce((sum, p)=>sum + valueAt(p, s.key), 0))
+                                            })
+                                        ]
+                                    }, s.key))
+                            }),
+                            0 === data.length ? /*#__PURE__*/ jsx(LineChartEmpty, {
+                                children: "No data"
+                            }) : /*#__PURE__*/ jsxs(ColumnChartBody, {
+                                children: [
+                                    /*#__PURE__*/ jsx(LineChartGrid, {}),
+                                    /*#__PURE__*/ jsx(ColumnChartXAxis, {
+                                        tickFormatter: formatX
+                                    }),
+                                    /*#__PURE__*/ jsx(LineChartYAxis, {
+                                        tickFormatter: formatValue
+                                    }),
+                                    /*#__PURE__*/ jsx(ColumnChartStack, {}),
+                                    /*#__PURE__*/ jsx(LineChartTooltip, {
+                                        children: renderTooltip
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+});
+export { ColumnChartComponent };

package/dist/components/Grid.d.ts

@@ -0,0 +1,29 @@
+import * as z from 'zod';
+export declare const GridComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    columns: z.ZodOptional<z.ZodEnum<{
+        1: "1";
+        12: "12";
+        2: "2";
+        3: "3";
+        4: "4";
+        6: "6";
+    }>>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        12: "12";
+        16: "16";
+        24: "24";
+        4: "4";
+        8: "8";
+    }>>;
+}, z.core.$strip>>;
+export declare const GridItemComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    span: z.ZodEnum<{
+        1: "1";
+        12: "12";
+        2: "2";
+        3: "3";
+        4: "4";
+        6: "6";
+        full: "full";
+    }>;
+}, z.core.$strip>>;

package/dist/components/Grid.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@wallarm-org/design-system/utils/cn";
+import { defineComponent } from "../core/define.js";
+import { GAPS } from "./Stack.js";
+import * as __rspack_external_zod from "zod";
+const COLUMNS = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '6',
+    '12'
+];
+const SPANS = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '6',
+    '12',
+    'full'
+];
+const COLUMN_CLASS = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const GAP_CLASS = {
+    4: 'gap-4',
+    8: 'gap-8',
+    12: 'gap-12',
+    16: 'gap-16',
+    24: 'gap-24'
+};
+const SPAN_CLASS = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12',
+    full: 'col-span-full'
+};
+const GridComponent = defineComponent({
+    name: 'Grid',
+    description: 'A dashboard grid: equal columns, children fill them left to right. Use 4 columns for KPI tiles, 2 for charts side by side; wrap a child in GridItem to span several columns.',
+    props: __rspack_external_zod.object({
+        columns: __rspack_external_zod["enum"](COLUMNS).optional().describe('Default 2'),
+        gap: __rspack_external_zod["enum"](GAPS).optional().describe('Space between cells, px. Default 12')
+    }),
+    hasChildren: true,
+    View: ({ props, children })=>/*#__PURE__*/ jsx("div", {
+            className: cn('grid w-full', COLUMN_CLASS[props.columns ?? '2'], GAP_CLASS[props.gap ?? '12']),
+            children: children
+        })
+});
+const GridItemComponent = defineComponent({
+    name: 'GridItem',
+    description: 'One Grid cell that spans several columns, e.g. a wide chart or table.',
+    props: __rspack_external_zod.object({
+        span: __rspack_external_zod["enum"](SPANS).describe('Columns to span; full spans the row')
+    }),
+    hasChildren: true,
+    View: ({ props, children })=>/*#__PURE__*/ jsx("div", {
+            className: cn('min-w-0', SPAN_CLASS[props.span]),
+            children: children
+        })
+});
+export { GridComponent, GridItemComponent };

package/dist/components/Heading.d.ts

@@ -0,0 +1,10 @@
+import * as z from 'zod';
+export declare const HeadingComponent: import("../index.js").GenUiComponent<z.ZodObject<{
+    text: z.ZodString;
+    size: z.ZodOptional<z.ZodEnum<{
+        "2xl": "2xl";
+        lg: "lg";
+        md: "md";
+        xl: "xl";
+    }>>;
+}, z.core.$strip>>;

package/dist/components/Heading.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Heading } from "@wallarm-org/design-system/Heading";
+import { Skeleton } from "@wallarm-org/design-system/Skeleton";
+import { defineComponent, subsetOf } from "../core/define.js";
+import * as __rspack_external_zod from "zod";
+const HeadingComponent = defineComponent({
+    name: 'Heading',
+    description: 'A page or block title. For a titled group of content, prefer Section.',
+    props: __rspack_external_zod.object({
+        text: __rspack_external_zod.string(),
+        size: __rspack_external_zod["enum"](subsetOf()([
+            'md',
+            'lg',
+            'xl',
+            '2xl'
+        ])).optional()
+    }),
+    Skeleton: ()=>/*#__PURE__*/ jsx(Skeleton, {
+            width: "40%",
+            height: "24px",
+            transparent: false
+        }),
+    View: ({ props })=>/*#__PURE__*/ jsx(Heading, {
+            size: props.size ?? 'lg',
+            weight: "medium",
+            children: props.text
+        })
+});
+export { HeadingComponent };