@uipath/apollo-vertex 0.0.0-stage → 0.1.0

package/dist/registry/bar-chart/bar-chart-view.js

@@ -0,0 +1,218 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, Cell, LabelList, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../chart/chart.js";
+import { BarLabel } from "./bar-label.js";
+import { MetricColumn } from "./metric-column.js";
+import { COLORS, PALETTE } from "./util/colors.js";
+import { getBarColor } from "./util/get-bar-color.js";
+import { isRechartsBarData } from "./util/recharts-bar-data.js";
+const BAR_SIZE = 20;
+const BAR_GAP = 4;
+const CATEGORY_GAP = 8;
+function bar_chart_view_BarChart({ rows, series }) {
+    const dimensionKeys = rows[0]?.dimensions.map((d)=>d.key) ?? [];
+    const dimensionCount = dimensionKeys.length;
+    const rechartsData = rows.map((row)=>{
+        const entry = {
+            __category: row.dimensions.map((d)=>d.label).filter((v)=>"" !== v).join(" • "),
+            __id: row.id,
+            __formatted: row.formattedValues
+        };
+        for (const s of series)entry[s.label] = row.values[s.id] ?? 0;
+        return entry;
+    });
+    const seriesCount = series.length;
+    const bandPx = seriesCount * BAR_SIZE + (seriesCount - 1) * BAR_GAP + CATEGORY_GAP;
+    const chartHeightPx = rechartsData.length * bandPx;
+    const singleDimensionWidthPct = 25;
+    const maxDimensionWidthPct = 35;
+    const dimensionWidthPct = dimensionCount <= 1 ? singleDimensionWidthPct : maxDimensionWidthPct / dimensionCount;
+    const dimensionCols = [];
+    for(let i = 0; i < dimensionCount; i++)dimensionCols.push(`minmax(0, ${dimensionWidthPct}%)`);
+    const gridCols = `${dimensionCols.join(" ")} 1fr minmax(0, 20%) minmax(0, 15%)`;
+    const chartConfig = Object.fromEntries(series.map((s, index)=>[
+            s.label,
+            {
+                label: s.label,
+                color: s.color ?? COLORS[index % COLORS.length] ?? COLORS["0"]
+            }
+        ]));
+    const valueColumnRows = rows.map((row)=>({
+            id: row.id,
+            cells: series.map((s)=>({
+                    id: s.id,
+                    text: row.formattedValues[s.id] ?? ""
+                }))
+        }));
+    const percentColumnRows = rows.map((row)=>({
+            id: row.id,
+            cells: series.map((s)=>({
+                    id: s.id,
+                    text: row.formattedPercents[s.id] ?? ""
+                }))
+        }));
+    return /*#__PURE__*/ jsx("div", {
+        className: "w-full h-full overflow-y-auto select-none [&_*]:pointer-events-auto p-2",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "grid gap-x-2 items-start",
+            style: {
+                gridTemplateColumns: gridCols
+            },
+            children: [
+                dimensionKeys.map((dimKey, dimIdx)=>/*#__PURE__*/ jsx("div", {
+                        className: "min-w-0 overflow-hidden",
+                        style: {
+                            height: `${chartHeightPx}px`
+                        },
+                        children: rows.map((row)=>{
+                            const label = row.dimensions[dimIdx]?.label ?? "";
+                            return /*#__PURE__*/ jsx("div", {
+                                className: "flex items-center pr-2 min-w-0 overflow-hidden",
+                                style: {
+                                    height: `${bandPx}px`
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "block w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap min-w-0 text-sm",
+                                    title: label,
+                                    children: label
+                                })
+                            }, `${row.id}-${dimKey}`);
+                        })
+                    }, dimKey)),
+                /*#__PURE__*/ jsx(ChartContainer, {
+                    config: chartConfig,
+                    className: "aspect-auto w-full",
+                    style: {
+                        height: `${chartHeightPx}px`
+                    },
+                    children: /*#__PURE__*/ jsxs(BarChart, {
+                        data: rechartsData,
+                        layout: "vertical",
+                        barGap: BAR_GAP,
+                        barCategoryGap: CATEGORY_GAP,
+                        margin: {
+                            top: 0,
+                            bottom: 0,
+                            left: 0,
+                            right: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(XAxis, {
+                                type: "number",
+                                hide: true,
+                                padding: {
+                                    left: 12,
+                                    right: 0
+                                }
+                            }),
+                            /*#__PURE__*/ jsx(YAxis, {
+                                type: "category",
+                                dataKey: "__category",
+                                width: 0,
+                                tick: false,
+                                axisLine: false,
+                                tickLine: false
+                            }),
+                            /*#__PURE__*/ jsx(ChartTooltip, {
+                                content: /*#__PURE__*/ jsx(ChartTooltipContent, {
+                                    className: "max-w-[320px]",
+                                    nameKey: "__category",
+                                    labelFormatter: String,
+                                    formatter: (value, name, item, _index, payload)=>{
+                                        const seriesIndex = series.findIndex((s)=>s.label === name);
+                                        const matched = series[seriesIndex];
+                                        if (!matched) return value ?? "";
+                                        const payloadObj = isRechartsBarData(payload) ? payload : null;
+                                        const formatted = payloadObj?.__formatted[matched.id] ?? String(value);
+                                        const indicatorColor = getBarColor({
+                                            seriesCount,
+                                            seriesIndex,
+                                            item,
+                                            payload: payloadObj,
+                                            rechartsData
+                                        });
+                                        return /*#__PURE__*/ jsxs(Fragment, {
+                                            children: [
+                                                /*#__PURE__*/ jsx("div", {
+                                                    className: "shrink-0 rounded-[2px] h-2.5 w-2.5",
+                                                    style: {
+                                                        backgroundColor: indicatorColor,
+                                                        borderColor: indicatorColor
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex flex-1 justify-between items-center leading-none",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "text-muted-foreground",
+                                                            children: matched.label
+                                                        }),
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "text-foreground font-mono font-medium tabular-nums",
+                                                            children: formatted
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        });
+                                    }
+                                }),
+                                cursor: false
+                            }),
+                            1 === seriesCount ? /*#__PURE__*/ jsxs(Bar, {
+                                dataKey: series[0]?.label ?? "",
+                                barSize: BAR_SIZE,
+                                children: [
+                                    /*#__PURE__*/ jsx(LabelList, {
+                                        content: (props)=>{
+                                            const payload = isRechartsBarData(props.payload) ? props.payload : null;
+                                            const formatted = payload && series[0] ? payload.__formatted[series[0].id] ?? "" : "";
+                                            return /*#__PURE__*/ jsx(BarLabel, {
+                                                ...props,
+                                                formatted: formatted
+                                            });
+                                        }
+                                    }),
+                                    rechartsData.map((row, index)=>/*#__PURE__*/ jsx(Cell, {
+                                            fill: PALETTE[index % PALETTE.length]
+                                        }, row.__id))
+                                ]
+                            }) : series.map((s, idx)=>/*#__PURE__*/ jsx(Bar, {
+                                    dataKey: s.label,
+                                    fill: s.color ?? COLORS[idx % COLORS.length],
+                                    barSize: BAR_SIZE,
+                                    children: /*#__PURE__*/ jsx(LabelList, {
+                                        content: (props)=>{
+                                            const payload = isRechartsBarData(props.payload) ? props.payload : null;
+                                            const formatted = payload?.__formatted[s.id] ?? "";
+                                            return /*#__PURE__*/ jsx(BarLabel, {
+                                                ...props,
+                                                formatted: formatted
+                                            });
+                                        }
+                                    })
+                                }, s.id))
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(MetricColumn, {
+                    keyPrefix: "value",
+                    rows: valueColumnRows,
+                    chartHeightPx: chartHeightPx,
+                    bandPx: bandPx,
+                    barSize: BAR_SIZE,
+                    barGap: BAR_GAP
+                }),
+                /*#__PURE__*/ jsx(MetricColumn, {
+                    keyPrefix: "percent",
+                    rows: percentColumnRows,
+                    chartHeightPx: chartHeightPx,
+                    bandPx: bandPx,
+                    barSize: BAR_SIZE,
+                    barGap: BAR_GAP
+                })
+            ]
+        })
+    });
+}
+export { bar_chart_view_BarChart as BarChart };

package/dist/registry/bar-chart/bar-chart-with-adapter.d.ts

@@ -0,0 +1,7 @@
+import { type BarChartConfiguration, type ChartDataModel, type DataAdapter, type StringModelField } from "../charts-core/charts-core";
+export interface BarChartWithAdapterProps {
+    configuration: BarChartConfiguration;
+    dataModel: ChartDataModel<StringModelField>;
+    dataAdapter: DataAdapter;
+}
+export declare function BarChartWithAdapter({ configuration, dataModel, dataAdapter, }: BarChartWithAdapterProps): import("react/jsx-runtime").JSX.Element;

package/dist/registry/bar-chart/bar-chart-with-adapter.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { useIsFetching, useSuspenseQuery } from "@tanstack/react-query";
+import { useDeferredValue } from "react";
+import { useTranslation } from "react-i18next";
+import { assertNumberOrNull } from "../../lib/asserts/assert-number-or-null.js";
+import { ChartLoadingBoundary, SpinnerWithChildren, format, formatMetricValue, formatPercentage } from "../charts-core/charts-core.js";
+import { BarChart } from "./bar-chart-view.js";
+import { COLORS } from "./util/colors.js";
+function BarChartWithAdapter({ configuration, dataModel, dataAdapter }) {
+    return /*#__PURE__*/ jsx(ChartLoadingBoundary, {
+        configuration: configuration,
+        dataModel: dataModel,
+        children: /*#__PURE__*/ jsx(BarChartResolver, {
+            configuration: configuration,
+            dataModel: dataModel,
+            dataAdapter: dataAdapter
+        })
+    });
+}
+function BarChartResolver({ configuration, dataModel, dataAdapter }) {
+    const { i18n: { language } } = useTranslation();
+    const deferrableProps = useDeferredValue({
+        configuration,
+        dataModel,
+        dataAdapter
+    });
+    const query = dataAdapter.charts.bar(configuration, dataModel);
+    const deferredQuery = deferrableProps.dataAdapter.charts.bar(deferrableProps.configuration, deferrableProps.dataModel);
+    const isFetching = useIsFetching(query) > 0;
+    const dataset = useSuspenseQuery(deferredQuery).data;
+    const dimensions = configuration.dimensions.map((id)=>dataModel.dimensions.find((d)=>d.id === id)).filter((d)=>null != d);
+    const metrics = configuration.metrics.map((id)=>dataModel.metrics.find((m)=>m.id === id)).filter((m)=>null != m);
+    const totalsByMetricId = Object.fromEntries(metrics.map((m)=>[
+            m.id,
+            dataset.reduce((sum, row)=>sum + (assertNumberOrNull(row[m.id], "Metric value") ?? 0), 0)
+        ]));
+    const rows = dataset.map((row, rowIdx)=>{
+        const rowDimensions = dimensions.map((d)=>({
+                key: d.id,
+                label: format(language, row[d.id], d.type) ?? ""
+            }));
+        const values = {};
+        const formattedValues = {};
+        const formattedPercents = {};
+        for (const m of metrics){
+            const v = assertNumberOrNull(row[m.id], "Metric value") ?? 0;
+            values[m.id] = v;
+            formattedValues[m.id] = formatMetricValue(language, v, m.expression);
+            const total = totalsByMetricId[m.id] ?? 0;
+            formattedPercents[m.id] = 0 === total ? "" : formatPercentage(language, v / total);
+        }
+        return {
+            id: `${rowIdx}-${rowDimensions.map((d)=>d.label).join("|")}`,
+            dimensions: rowDimensions,
+            values,
+            formattedValues,
+            formattedPercents
+        };
+    });
+    const series = metrics.map((m, idx)=>({
+            id: m.id,
+            label: m.display,
+            color: COLORS[idx % COLORS.length]
+        }));
+    return /*#__PURE__*/ jsx(SpinnerWithChildren, {
+        loading: isFetching,
+        children: /*#__PURE__*/ jsx(BarChart, {
+            rows: rows,
+            series: series
+        })
+    });
+}
+export { BarChartWithAdapter };

package/dist/registry/bar-chart/bar-chart.d.ts

@@ -0,0 +1,2 @@
+export { BarChart, type BarChartProps, type BarChartRow, type BarChartSeries, } from "./bar-chart-view";
+export { BarChartWithAdapter, type BarChartWithAdapterProps, } from "./bar-chart-with-adapter";

package/dist/registry/bar-chart/bar-chart.js

@@ -0,0 +1,3 @@
+import { BarChart } from "./bar-chart-view.js";
+import { BarChartWithAdapter } from "./bar-chart-with-adapter.js";
+export { BarChart, BarChartWithAdapter };

package/dist/registry/bar-chart/bar-label.d.ts

@@ -0,0 +1,6 @@
+import type { LabelListContentProps } from "./util/recharts-bar-data";
+interface BarLabelProps extends LabelListContentProps {
+    formatted: string;
+}
+export declare function BarLabel({ x, y, width, height, formatted }: BarLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/registry/bar-chart/bar-label.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+function BarLabel({ x, y, width, height, formatted }) {
+    const xNum = Number(x ?? 0);
+    const yNum = Number(y ?? 0);
+    const wNum = Number(width ?? 0);
+    const hNum = Number(height ?? 0);
+    return /*#__PURE__*/ jsx("text", {
+        x: xNum + wNum + 6,
+        y: yNum + hNum / 2,
+        dy: "0.35em",
+        fill: "var(--color-fg, #222)",
+        fontSize: "14",
+        children: formatted
+    });
+}
+export { BarLabel };

package/dist/registry/bar-chart/metric-column.d.ts

@@ -0,0 +1,17 @@
+interface MetricColumnRow {
+    id: string;
+    cells: Array<{
+        id: string;
+        text: string;
+    }>;
+}
+interface MetricColumnProps {
+    keyPrefix: string;
+    rows: MetricColumnRow[];
+    chartHeightPx: number;
+    bandPx: number;
+    barSize: number;
+    barGap: number;
+}
+export declare function MetricColumn({ keyPrefix, rows, chartHeightPx, bandPx, barSize, barGap, }: MetricColumnProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/registry/bar-chart/metric-column.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+function MetricColumn({ keyPrefix, rows, chartHeightPx, bandPx, barSize, barGap }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "min-w-0 overflow-hidden",
+        style: {
+            height: `${chartHeightPx}px`
+        },
+        children: rows.map((row)=>/*#__PURE__*/ jsx("div", {
+                className: "flex flex-col justify-center min-w-0",
+                style: {
+                    height: `${bandPx}px`,
+                    gap: `${barGap}px`
+                },
+                children: row.cells.map((cell)=>/*#__PURE__*/ jsx("div", {
+                        className: "flex items-center justify-start min-w-0",
+                        style: {
+                            height: `${barSize}px`
+                        },
+                        title: cell.text,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "block w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap min-w-0 text-sm",
+                            children: cell.text
+                        })
+                    }, `${keyPrefix}-${row.id}-${cell.id}`))
+            }, `${keyPrefix}-${row.id}`))
+    });
+}
+export { MetricColumn };

package/dist/registry/bar-chart/util/colors.d.ts

@@ -0,0 +1,2 @@
+export declare const COLORS: string[];
+export declare const PALETTE: string[];

package/dist/registry/bar-chart/util/colors.js

@@ -0,0 +1,17 @@
+const COLORS = [
+    "#8884d8",
+    "#82ca9d",
+    "#ffc658",
+    "#ff7f50",
+    "#a4de6c",
+    "#d0ed57",
+    "#8dd1e1",
+    "#83a6ed"
+];
+const PALETTE = [
+    "#0d47a1",
+    "#64b5f6",
+    "#9e9e9e",
+    "#fb8c00"
+];
+export { COLORS, PALETTE };

package/dist/registry/bar-chart/util/get-bar-color.d.ts

@@ -0,0 +1,15 @@
+import type { RechartsBarData } from "./recharts-bar-data";
+interface GetBarColorParams {
+    seriesCount: number;
+    seriesIndex: number;
+    item: {
+        color?: string;
+        payload?: {
+            fill?: string;
+        };
+    };
+    payload: RechartsBarData | null;
+    rechartsData: Array<RechartsBarData>;
+}
+export declare function getBarColor({ seriesCount, seriesIndex, item, payload, rechartsData, }: GetBarColorParams): string;
+export {};

package/dist/registry/bar-chart/util/get-bar-color.js

@@ -0,0 +1,14 @@
+import { assertDefined } from "../../../lib/asserts/assert-defined.js";
+import { COLORS, PALETTE } from "./colors.js";
+function getBarColor({ seriesCount, seriesIndex, item, payload, rechartsData }) {
+    const itemColor = item.color;
+    const payloadFill = item.payload?.fill;
+    if (1 === seriesCount) {
+        const rowIndex = rechartsData.findIndex((row)=>row.__id === payload?.__id);
+        const fallbackColor = PALETTE[rowIndex >= 0 ? rowIndex % PALETTE.length : 0];
+        return assertDefined(itemColor ?? payloadFill ?? fallbackColor, "Bar color");
+    }
+    const fallbackColor = COLORS[seriesIndex % COLORS.length];
+    return assertDefined(itemColor ?? payloadFill ?? fallbackColor, "Bar color");
+}
+export { getBarColor };

package/dist/registry/bar-chart/util/recharts-bar-data.d.ts

@@ -0,0 +1,14 @@
+export type RechartsBarData = {
+    __category: string;
+    __id: string;
+    __formatted: Record<string, string>;
+    [key: string]: string | number | Record<string, string>;
+};
+export type LabelListContentProps = {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+    payload?: RechartsBarData;
+};
+export declare function isRechartsBarData(value: unknown): value is RechartsBarData;

package/dist/registry/bar-chart/util/recharts-bar-data.js

@@ -0,0 +1,4 @@
+function isRechartsBarData(value) {
+    return "object" == typeof value && null !== value && "__category" in value && "__id" in value;
+}
+export { isRechartsBarData };

package/dist/registry/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/registry/breadcrumb/breadcrumb.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../lib/utils.js";
+function Breadcrumb({ ...props }) {
+    return /*#__PURE__*/ jsx("nav", {
+        "aria-label": "breadcrumb",
+        "data-slot": "breadcrumb",
+        ...props
+    });
+}
+function BreadcrumbList({ className, ...props }) {
+    return /*#__PURE__*/ jsx("ol", {
+        "data-slot": "breadcrumb-list",
+        className: cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className),
+        ...props
+    });
+}
+function BreadcrumbItem({ className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        "data-slot": "breadcrumb-item",
+        className: cn("inline-flex items-center gap-1.5", className),
+        ...props
+    });
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+    const Comp = asChild ? Slot : "a";
+    return /*#__PURE__*/ jsx(Comp, {
+        "data-slot": "breadcrumb-link",
+        className: cn("hover:text-foreground transition-colors", className),
+        ...props
+    });
+}
+function BreadcrumbPage({ className, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "breadcrumb-page",
+        role: "link",
+        "aria-disabled": "true",
+        "aria-current": "page",
+        className: cn("text-foreground font-normal", className),
+        ...props
+    });
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        "data-slot": "breadcrumb-separator",
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn("[&>svg]:size-3.5", className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronRight, {})
+    });
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    const { t } = useTranslation();
+    return /*#__PURE__*/ jsxs("span", {
+        "data-slot": "breadcrumb-ellipsis",
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn("flex size-9 items-center justify-center", className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(MoreHorizontal, {
+                className: "size-4"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: t("more")
+            })
+        ]
+    });
+}
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/registry/button/button.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "destructive" | "info" | "outline" | "secondary" | "success" | "warning" | "default" | "ghost" | "destructive-outline" | "ai" | "ai-soft" | "ai-outline" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/registry/button/button.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import "react";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            outline: "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            "destructive-outline": "border border-destructive bg-background text-destructive shadow-xs hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 dark:bg-input/30 dark:hover:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+            link: "text-primary underline-offset-4 hover:underline",
+            success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/60",
+            info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40 dark:bg-info/60",
+            warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60",
+            ai: "text-white hover:opacity-90 [background-image:var(--ai-gradient-fill)]",
+            "ai-soft": "text-foreground hover:opacity-90 [background-image:var(--ai-gradient)]",
+            "ai-outline": "border border-transparent text-insight-600 dark:text-insight-400 hover:opacity-90 [background-image:linear-gradient(var(--background),var(--background)),var(--ai-gradient-strong)] [background-origin:border-box] [background-clip:padding-box,border-box]"
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-lg px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            "icon-xs": "size-7",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return /*#__PURE__*/ jsx(Comp, {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(buttonVariants({
+            variant,
+            size,
+            className
+        })),
+        ...props
+    });
+}
+export { Button, buttonVariants };

package/dist/registry/button-group/button-group.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Separator } from "../separator/separator";
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };