@uipath/apollo-wind 0.9.0 → 0.10.0-pr219.eea0372

package/dist/components/ui/chart.cjs

@@ -0,0 +1,218 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ChartContainer: ()=>ChartContainer,
+    ChartLegend: ()=>ChartLegend,
+    ChartTooltipContent: ()=>ChartTooltipContent,
+    ChartLegendContent: ()=>ChartLegendContent,
+    ChartTooltip: ()=>ChartTooltip,
+    ChartStyle: ()=>ChartStyle
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_recharts_namespaceObject = require("recharts");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const THEMES = {
+    light: '.future-light',
+    dark: '.future-dark'
+};
+const ChartContext = /*#__PURE__*/ external_react_namespaceObject.createContext(null);
+function useChart() {
+    const context = external_react_namespaceObject.useContext(ChartContext);
+    if (!context) throw new Error('useChart must be used within a <ChartContainer />');
+    return context;
+}
+function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = external_react_namespaceObject.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartContext.Provider, {
+        value: {
+            config
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            "data-slot": "chart",
+            "data-chart": chartId,
+            className: (0, index_cjs_namespaceObject.cn)('[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden', className),
+            ...props,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartStyle, {
+                    id: chartId,
+                    config: config
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_recharts_namespaceObject.ResponsiveContainer, {
+                    children: children
+                })
+            ]
+        })
+    });
+}
+const ChartStyle = ({ id, config })=>{
+    const colorConfig = Object.entries(config).filter(([, config])=>config.theme || config.color);
+    if (!colorConfig.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
+        dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES).map(([theme, prefix])=>`
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig])=>{
+                    const color = itemConfig.theme?.[theme] || itemConfig.color;
+                    return color ? `  --color-${key}: ${color};` : null;
+                }).join('\n')}
+}
+`).join('\n')
+        }
+    });
+};
+const ChartTooltip = external_recharts_namespaceObject.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+    const { config } = useChart();
+    const tooltipLabel = external_react_namespaceObject.useMemo(()=>{
+        if (hideLabel || !payload?.length) return null;
+        const [item] = payload;
+        const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = labelKey || 'string' != typeof label ? itemConfig?.label : config[label]?.label || label;
+        if (labelFormatter) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('font-medium', labelClassName),
+            children: labelFormatter(value, payload)
+        });
+        if (!value) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('font-medium', labelClassName),
+            children: value
+        });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
+    if (!active || !payload?.length) return null;
+    const nestLabel = 1 === payload.length && 'dot' !== indicator;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className),
+        children: [
+            nestLabel ? null : tooltipLabel,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "grid gap-1.5",
+                children: payload.filter((item)=>'none' !== item.type).map((item, index)=>{
+                    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color || item.payload.fill || item.color;
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: (0, index_cjs_namespaceObject.cn)('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', 'dot' === indicator && 'items-center'),
+                        children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                itemConfig?.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: (0, index_cjs_namespaceObject.cn)('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                                        'h-2.5 w-2.5': 'dot' === indicator,
+                                        'w-1': 'line' === indicator,
+                                        'w-0 border-[1.5px] border-dashed bg-transparent': 'dashed' === indicator,
+                                        'my-0.5': nestLabel && 'dashed' === indicator
+                                    }),
+                                    style: {
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: (0, index_cjs_namespaceObject.cn)('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'),
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            className: "grid gap-1.5",
+                                            children: [
+                                                nestLabel ? tooltipLabel : null,
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    className: "text-muted-foreground",
+                                                    children: itemConfig?.label || item.name
+                                                })
+                                            ]
+                                        }),
+                                        item.value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "text-foreground font-mono font-medium tabular-nums",
+                                            children: item.value.toLocaleString()
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }, item.dataKey);
+                })
+            })
+        ]
+    });
+}
+const ChartLegend = external_recharts_namespaceObject.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }) {
+    const { config } = useChart();
+    if (!payload?.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex items-center justify-center gap-4', 'top' === verticalAlign ? 'pb-3' : 'pt-3', className),
+        children: payload.filter((item)=>'none' !== item.type).map((item)=>{
+            const key = `${nameKey || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'),
+                children: [
+                    itemConfig?.icon && !hideIcon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "h-2 w-2 shrink-0 rounded-[2px]",
+                        style: {
+                            backgroundColor: item.color
+                        }
+                    }),
+                    itemConfig?.label
+                ]
+            }, item.value);
+        })
+    });
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if ('object' != typeof payload || null === payload) return;
+    const payloadPayload = 'payload' in payload && 'object' == typeof payload.payload && null !== payload.payload ? payload.payload : void 0;
+    let configLabelKey = key;
+    if (key in payload && 'string' == typeof payload[key]) configLabelKey = payload[key];
+    else if (payloadPayload && key in payloadPayload && 'string' == typeof payloadPayload[key]) configLabelKey = payloadPayload[key];
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+exports.ChartContainer = __webpack_exports__.ChartContainer;
+exports.ChartLegend = __webpack_exports__.ChartLegend;
+exports.ChartLegendContent = __webpack_exports__.ChartLegendContent;
+exports.ChartStyle = __webpack_exports__.ChartStyle;
+exports.ChartTooltip = __webpack_exports__.ChartTooltip;
+exports.ChartTooltipContent = __webpack_exports__.ChartTooltipContent;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ChartContainer",
+    "ChartLegend",
+    "ChartLegendContent",
+    "ChartStyle",
+    "ChartTooltip",
+    "ChartTooltipContent"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/chart.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+declare const THEMES: {
+    readonly light: ".future-light";
+    readonly dark: ".future-dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): import("react/jsx-runtime").JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<'div'> & Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/components/ui/chart.js

@@ -0,0 +1,169 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo } from "react";
+import { Legend, ResponsiveContainer, Tooltip } from "recharts";
+import { cn } from "../../lib/index.js";
+const THEMES = {
+    light: '.future-light',
+    dark: '.future-dark'
+};
+const ChartContext = /*#__PURE__*/ createContext(null);
+function useChart() {
+    const context = useContext(ChartContext);
+    if (!context) throw new Error('useChart must be used within a <ChartContainer />');
+    return context;
+}
+function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    return /*#__PURE__*/ jsx(ChartContext.Provider, {
+        value: {
+            config
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-slot": "chart",
+            "data-chart": chartId,
+            className: cn('[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden', className),
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(ChartStyle, {
+                    id: chartId,
+                    config: config
+                }),
+                /*#__PURE__*/ jsx(ResponsiveContainer, {
+                    children: children
+                })
+            ]
+        })
+    });
+}
+const ChartStyle = ({ id, config })=>{
+    const colorConfig = Object.entries(config).filter(([, config])=>config.theme || config.color);
+    if (!colorConfig.length) return null;
+    return /*#__PURE__*/ jsx("style", {
+        dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES).map(([theme, prefix])=>`
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig])=>{
+                    const color = itemConfig.theme?.[theme] || itemConfig.color;
+                    return color ? `  --color-${key}: ${color};` : null;
+                }).join('\n')}
+}
+`).join('\n')
+        }
+    });
+};
+const ChartTooltip = Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+    const { config } = useChart();
+    const tooltipLabel = useMemo(()=>{
+        if (hideLabel || !payload?.length) return null;
+        const [item] = payload;
+        const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = labelKey || 'string' != typeof label ? itemConfig?.label : config[label]?.label || label;
+        if (labelFormatter) return /*#__PURE__*/ jsx("div", {
+            className: cn('font-medium', labelClassName),
+            children: labelFormatter(value, payload)
+        });
+        if (!value) return null;
+        return /*#__PURE__*/ jsx("div", {
+            className: cn('font-medium', labelClassName),
+            children: value
+        });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
+    if (!active || !payload?.length) return null;
+    const nestLabel = 1 === payload.length && 'dot' !== indicator;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className),
+        children: [
+            nestLabel ? null : tooltipLabel,
+            /*#__PURE__*/ jsx("div", {
+                className: "grid gap-1.5",
+                children: payload.filter((item)=>'none' !== item.type).map((item, index)=>{
+                    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color || item.payload.fill || item.color;
+                    return /*#__PURE__*/ jsx("div", {
+                        className: cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', 'dot' === indicator && 'items-center'),
+                        children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                itemConfig?.icon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ jsx("div", {
+                                    className: cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                                        'h-2.5 w-2.5': 'dot' === indicator,
+                                        'w-1': 'line' === indicator,
+                                        'w-0 border-[1.5px] border-dashed bg-transparent': 'dashed' === indicator,
+                                        'my-0.5': nestLabel && 'dashed' === indicator
+                                    }),
+                                    style: {
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor
+                                    }
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'),
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "grid gap-1.5",
+                                            children: [
+                                                nestLabel ? tooltipLabel : null,
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-muted-foreground",
+                                                    children: itemConfig?.label || item.name
+                                                })
+                                            ]
+                                        }),
+                                        item.value && /*#__PURE__*/ jsx("span", {
+                                            className: "text-foreground font-mono font-medium tabular-nums",
+                                            children: item.value.toLocaleString()
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }, item.dataKey);
+                })
+            })
+        ]
+    });
+}
+const ChartLegend = Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }) {
+    const { config } = useChart();
+    if (!payload?.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex items-center justify-center gap-4', 'top' === verticalAlign ? 'pb-3' : 'pt-3', className),
+        children: payload.filter((item)=>'none' !== item.type).map((item)=>{
+            const key = `${nameKey || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return /*#__PURE__*/ jsxs("div", {
+                className: cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'),
+                children: [
+                    itemConfig?.icon && !hideIcon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : /*#__PURE__*/ jsx("div", {
+                        className: "h-2 w-2 shrink-0 rounded-[2px]",
+                        style: {
+                            backgroundColor: item.color
+                        }
+                    }),
+                    itemConfig?.label
+                ]
+            }, item.value);
+        })
+    });
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if ('object' != typeof payload || null === payload) return;
+    const payloadPayload = 'payload' in payload && 'object' == typeof payload.payload && null !== payload.payload ? payload.payload : void 0;
+    let configLabelKey = key;
+    if (key in payload && 'string' == typeof payload[key]) configLabelKey = payload[key];
+    else if (payloadPayload && key in payloadPayload && 'string' == typeof payloadPayload[key]) configLabelKey = payloadPayload[key];
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/components/ui/data-table.cjs

@@ -38,11 +38,22 @@ const external_editable_cell_cjs_namespaceObject = require("./editable-cell.cjs"
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_table_cjs_namespaceObject = require("./table.cjs");
 const react_table_namespaceObject = require("@tanstack/react-table");
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns' }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent }) {
     const [sorting, setSorting] = external_react_namespaceObject.useState([]);
     const [columnFilters, setColumnFilters] = external_react_namespaceObject.useState([]);
     const [columnVisibility, setColumnVisibility] = external_react_namespaceObject.useState({});
-    const [rowSelection, setRowSelection] = external_react_namespaceObject.useState({});
+    const [internalRowSelection, setInternalRowSelection] = external_react_namespaceObject.useState({});
+    const isControlled = void 0 !== controlledRowSelection;
+    const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+    const setRowSelection = external_react_namespaceObject.useCallback((updater)=>{
+        const next = 'function' == typeof updater ? updater(rowSelection) : updater;
+        if (!isControlled) setInternalRowSelection(next);
+        controlledOnRowSelectionChange?.(next);
+    }, [
+        isControlled,
+        rowSelection,
+        controlledOnRowSelectionChange
+    ]);
     const processedColumns = external_react_namespaceObject.useMemo(()=>{
         if (!editable || !onCellUpdate) return columns;
         return columns.map((col)=>{
@@ -100,6 +111,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                         onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
                         className: "max-w-sm"
                     }),
+                    toolbarContent,
                     showColumnToggle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {

package/dist/components/ui/data-table.d.ts

@@ -13,8 +13,11 @@ export interface DataTableProps<TData, TValue> {
     resizable?: boolean;
     compact?: boolean;
     columnToggleText?: string;
+    rowSelection?: Record<string, boolean>;
+    onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+    toolbarContent?: React.ReactNode;
 }
-export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export declare function DataTableColumnHeader<TData, TValue>({ column, title, children, }: {
     column: Column<TData, TValue>;
     title: string;

package/dist/components/ui/data-table.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from "lucide-react";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
@@ -8,11 +8,22 @@ import { EditableCell } from "./editable-cell.js";
 import { Input } from "./input.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns' }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent }) {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [columnVisibility, setColumnVisibility] = useState({});
-    const [rowSelection, setRowSelection] = useState({});
+    const [internalRowSelection, setInternalRowSelection] = useState({});
+    const isControlled = void 0 !== controlledRowSelection;
+    const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+    const setRowSelection = useCallback((updater)=>{
+        const next = 'function' == typeof updater ? updater(rowSelection) : updater;
+        if (!isControlled) setInternalRowSelection(next);
+        controlledOnRowSelectionChange?.(next);
+    }, [
+        isControlled,
+        rowSelection,
+        controlledOnRowSelectionChange
+    ]);
     const processedColumns = useMemo(()=>{
         if (!editable || !onCellUpdate) return columns;
         return columns.map((col)=>{
@@ -70,6 +81,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                         onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
                         className: "max-w-sm"
                     }),
+                    toolbarContent,
                     showColumnToggle && /*#__PURE__*/ jsxs(DropdownMenu, {
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuTrigger, {

package/dist/components/ui/empty-state.cjs

@@ -30,25 +30,31 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ icon, title, description, action, secondaryAction, className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ icon, code, title, description, action, secondaryAction, className, children, ...props }, ref)=>{
+    const hasSimpleActions = !children && (action || secondaryAction);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: ref,
         className: (0, index_cjs_namespaceObject.cn)('flex flex-col items-center justify-center p-8 text-center', className),
         ...props,
         children: [
             icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground",
+                className: "mb-6 flex items-center justify-center",
                 children: icon
             }),
+            code && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
+                className: "text-[40px] font-bold tracking-[-0.8px] leading-none mb-4",
+                children: code
+            }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
                 className: "text-xl font-semibold tracking-tight",
                 children: title
             }),
             description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                className: "mt-3 mb-6 max-w-md text-sm text-muted-foreground leading-relaxed",
+                className: "mt-3 max-w-md text-sm text-muted-foreground leading-relaxed",
                 children: description
             }),
-            (action || secondaryAction) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex flex-wrap items-center justify-center gap-2",
+            hasSimpleActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "mt-6 flex flex-wrap items-center justify-center gap-2",
                 children: [
                     action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
                         onClick: action.onClick,
@@ -60,9 +66,14 @@ const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ ic
                         children: secondaryAction.label
                     })
                 ]
+            }),
+            children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "mt-6 flex flex-wrap items-center justify-center gap-2",
+                children: children
             })
         ]
-    }));
+    });
+});
 EmptyState.displayName = 'EmptyState';
 exports.EmptyState = __webpack_exports__.EmptyState;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [

package/dist/components/ui/empty-state.d.ts

@@ -1,12 +1,19 @@
 import * as React from 'react';
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Optional visual element displayed above the content (icon, illustration, video, etc.) */
     icon?: React.ReactNode;
+    /** Optional large status code displayed above the title (e.g. "404", "500") */
+    code?: string;
+    /** Primary heading — always visible */
     title: string;
+    /** Optional body text below the title */
     description?: string;
+    /** Simple primary action — ignored when children are provided */
     action?: {
         label: string;
         onClick: () => void;
     };
+    /** Simple secondary action — ignored when children are provided */
     secondaryAction?: {
         label: string;
         onClick: () => void;

package/dist/components/ui/empty-state.js

@@ -2,25 +2,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/index.js";
-const EmptyState = /*#__PURE__*/ forwardRef(({ icon, title, description, action, secondaryAction, className, ...props }, ref)=>/*#__PURE__*/ jsxs("div", {
+const EmptyState = /*#__PURE__*/ forwardRef(({ icon, code, title, description, action, secondaryAction, className, children, ...props }, ref)=>{
+    const hasSimpleActions = !children && (action || secondaryAction);
+    return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         className: cn('flex flex-col items-center justify-center p-8 text-center', className),
         ...props,
         children: [
             icon && /*#__PURE__*/ jsx("div", {
-                className: "mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground",
+                className: "mb-6 flex items-center justify-center",
                 children: icon
             }),
+            code && /*#__PURE__*/ jsx("h1", {
+                className: "text-[40px] font-bold tracking-[-0.8px] leading-none mb-4",
+                children: code
+            }),
             /*#__PURE__*/ jsx("h3", {
                 className: "text-xl font-semibold tracking-tight",
                 children: title
             }),
             description && /*#__PURE__*/ jsx("p", {
-                className: "mt-3 mb-6 max-w-md text-sm text-muted-foreground leading-relaxed",
+                className: "mt-3 max-w-md text-sm text-muted-foreground leading-relaxed",
                 children: description
             }),
-            (action || secondaryAction) && /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-wrap items-center justify-center gap-2",
+            hasSimpleActions && /*#__PURE__*/ jsxs("div", {
+                className: "mt-6 flex flex-wrap items-center justify-center gap-2",
                 children: [
                     action && /*#__PURE__*/ jsx(Button, {
                         onClick: action.onClick,
@@ -32,8 +38,13 @@ const EmptyState = /*#__PURE__*/ forwardRef(({ icon, title, description, action,
                         children: secondaryAction.label
                     })
                 ]
+            }),
+            children && /*#__PURE__*/ jsx("div", {
+                className: "mt-6 flex flex-wrap items-center justify-center gap-2",
+                children: children
             })
         ]
-    }));
+    });
+});
 EmptyState.displayName = 'EmptyState';
 export { EmptyState };