@kjaniec-dev/ui 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -292,4 +292,41 @@ interface PageHeaderProps {
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbSeparator, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuSeparator, DropdownMenuTrigger, Field, Hint, type HintProps, Input, type InputProps, Label, type LabelProps, Modal, ModalActions, ModalDescription, type ModalProps, ModalTitle, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastTone, Tooltip, type TooltipProps, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    value: string | number;
+    trend?: string;
+    trendDirection?: "up" | "down" | "neutral";
+    description?: string;
+    icon?: React.ReactNode;
+}
+declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface DataTableColumn<T> {
+    header: React.ReactNode;
+    accessor: (row: T) => React.ReactNode;
+    className?: string;
+}
+interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    loading?: boolean;
+    error?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyAction?: React.ReactNode;
+}
+declare function DataTable<T>({ className, columns, data, loading, error, emptyTitle, emptyDescription, emptyAction, ...props }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbSeparator, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, DataTable, type DataTableColumn, type DataTableProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Field, Hint, type HintProps, Input, type InputProps, Label, type LabelProps, MetricCard, type MetricCardProps, Modal, ModalActions, ModalDescription, type ModalProps, ModalTitle, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastTone, Tooltip, type TooltipProps, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };

package/dist/index.js

@@ -1079,7 +1079,79 @@ var PageHeader = React17.forwardRef(
   ] }) })
 );
 PageHeader.displayName = "PageHeader";
+var EmptyState = React17.forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center text-center p-8 border border-dashed border-border rounded-kj-lg bg-muted/20 min-h-[300px]",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground mb-4 [&_svg]:h-6 [&_svg]:w-6", children: icon }),
+        /* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground mb-1", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm mb-6 leading-relaxed", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: action })
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+var MetricCard = React17.forwardRef(
+  ({ className, title, value, trend, trendDirection = "neutral", description, icon, ...props }, ref) => {
+    const trendColor = {
+      up: "text-success bg-success-surface border-success/20",
+      down: "text-danger bg-danger-surface border-danger/20",
+      neutral: "text-muted-foreground bg-muted border-border/20"
+    }[trendDirection];
+    return /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-6", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-semibold uppercase tracking-[0.1em] text-muted-foreground", children: title }),
+        icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0 [&_svg]:h-4 [&_svg]:w-4", children: icon })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5 mb-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight text-foreground", children: value }),
+        trend && /* @__PURE__ */ jsx("span", { className: cn("text-[0.75rem] font-bold px-2 py-0.5 rounded-full border", trendColor), children: trend })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
+    ] });
+  }
+);
+MetricCard.displayName = "MetricCard";
+function DataTable({
+  className,
+  columns,
+  data,
+  loading = false,
+  error,
+  emptyTitle = "No data available",
+  emptyDescription = "There are no records to display at this time.",
+  emptyAction,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(TableWrap, { className: cn("relative overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col, idx) => /* @__PURE__ */ jsx(TableHead, { className: col.className, children: col.header }, idx)) }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: loading && data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-64 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: 32 }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading dataset..." })
+      ] }) }) }) : error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "p-8", children: /* @__PURE__ */ jsx(Alert, { variant: "danger", title: "Error loading data", children: error }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: emptyTitle,
+          description: emptyDescription,
+          action: emptyAction,
+          className: "border-none bg-transparent rounded-none py-16"
+        }
+      ) }) }) : data.map((row, rowIdx) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col, colIdx) => /* @__PURE__ */ jsx(TableCell, { className: col.className, children: col.accessor(row) }, colIdx)) }, rowIdx)) })
+    ] }),
+    loading && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] grid place-items-center z-10 transition-opacity duration-150", children: /* @__PURE__ */ jsx(Spinner, { size: 36 }) })
+  ] });
+}
+DataTable.displayName = "DataTable";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Field, Hint, Input, Label, Modal, ModalActions, ModalDescription, ModalTitle, PageHeader, Pagination, Progress, Radio, Segmented, Select, Slider, Spinner, Stat, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Field, Hint, Input, Label, MetricCard, Modal, ModalActions, ModalDescription, ModalTitle, PageHeader, Pagination, Progress, Radio, Segmented, Select, Slider, Spinner, Stat, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map