@socprime/react-ui 0.0.5

package/ui/Table/TableWrap.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { flexRender } from "@tanstack/react-table";
+import { DatabaseIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { memo } from "react";
+import { ConditionalContent } from "../ConditionalContent/ConditionalContent.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { SkeletonTable } from "../Skeleton/Skeleton.js";
+import { getColumnStyle } from "./columnStyle.js";
+import { RowGrouped } from "./RowGrouped.js";
+import { SortableHeader } from "./SortableHeader.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table.js";
+function TableWrapInner({
+  className,
+  classNameTable,
+  classNameScrollArea,
+  classNameHeader,
+  classNameCell,
+  table,
+  columns,
+  data: _data,
+  orientation = "both",
+  loading = false,
+  rowSelection: _rowSelection,
+  loadedContent,
+  emptyContent
+}) {
+  const defaultTableBody = /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: table.getRowModel().rows.map((row, index) => {
+    if (row.getIsGrouped()) {
+      return /* @__PURE__ */ jsx(RowGrouped, { row, table }, row.id);
+    }
+    return /* @__PURE__ */ jsx(
+      motion.tr,
+      {
+        "data-state": row.getIsSelected() && "selected",
+        className: cn(
+          "hover:bg-hover/20 data-[state=selected]:bg-secondary/80 border-border group border-b transition-colors",
+          row.getIsGrouped() && "bg-secondary/30"
+        ),
+        initial: { opacity: 0, x: -50 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: -50 },
+        transition: {
+          duration: 0.3,
+          delay: index * 0.05,
+          ease: [0.16, 1, 0.3, 1]
+        },
+        children: row.getVisibleCells().map((cell) => {
+          if (cell.getIsPlaceholder() || cell.getIsGrouped()) {
+            return null;
+          }
+          const columnStyle = getColumnStyle(cell.column.columnDef.meta);
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cn("px-6 py-4", classNameCell),
+              style: columnStyle,
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          );
+        })
+      },
+      row.id
+    );
+  }) }) : /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 p-0 text-center", children: emptyContent ?? /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      Icon: DatabaseIcon,
+      title: "No data",
+      description: "Results will be displayed here after you add some data"
+    }
+  ) }) }) });
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      className,
+      classNameTable: cn("text-xs font-normal", classNameTable),
+      orientation,
+      classNameScrollArea,
+      children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+          const grouping = table.getState().grouping;
+          if (grouping.includes(header.column.id)) {
+            return null;
+          }
+          const columnStyle = getColumnStyle(header.column.columnDef.meta);
+          const canSort = header.column.getCanSort();
+          const isSortingEnabled = table.options.enableSorting !== false;
+          return /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              className: cn(
+                "bg-secondary px-6 py-3",
+                classNameHeader,
+                canSort && isSortingEnabled && "hover:bg-muted/50 group cursor-pointer select-none"
+              ),
+              style: columnStyle,
+              onClick: canSort && isSortingEnabled ? header.column.getToggleSortingHandler() : void 0,
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                /* @__PURE__ */ jsx(SortableHeader, { header, isSortingEnabled })
+              ] })
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx(
+          ConditionalContent,
+          {
+            loading,
+            loadingContent: /* @__PURE__ */ jsx(SkeletonTable, { rows: 10, columns: columns.length }),
+            loadedContent: loadedContent ?? defaultTableBody
+          }
+        )
+      ]
+    }
+  );
+}
+const TableWrap = memo(TableWrapInner);
+export {
+  TableWrap
+};

package/ui/Table/columnStyle.js

@@ -0,0 +1,14 @@
+const getColumnStyle = (meta) => {
+  const { width, minWidth, maxWidth } = meta ?? {};
+  if (!width && !minWidth && !maxWidth) {
+    return void 0;
+  }
+  return {
+    width,
+    minWidth: minWidth ?? width,
+    maxWidth: maxWidth ?? width
+  };
+};
+export {
+  getColumnStyle
+};

package/ui/Table/index.js

@@ -0,0 +1,28 @@
+import { GroupHeaderRow } from "./GroupHeaderRow.js";
+import { ServerGroupedTableBody } from "./ServerGroupedTableBody.js";
+import { SortableHeader } from "./SortableHeader.js";
+import {
+  Table,
+  TableBody as TableBody2,
+  TableCaption as TableCaption2,
+  TableCell as TableCell2,
+  TableFooter as TableFooter2,
+  TableHead as TableHead2,
+  TableHeader as TableHeader2,
+  TableRow as TableRow2
+} from "./Table.js";
+import { TableWrap } from "./TableWrap.js";
+export {
+  GroupHeaderRow,
+  ServerGroupedTableBody,
+  SortableHeader,
+  Table,
+  TableBody2 as TableBody,
+  TableCaption2 as TableCaption,
+  TableCell2 as TableCell,
+  TableFooter2 as TableFooter,
+  TableHead2 as TableHead,
+  TableHeader2 as TableHeader,
+  TableRow2 as TableRow,
+  TableWrap
+};

package/ui/Tabs/Tabs.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/cn.js";
+function Tabs({
+  tabs,
+  defaultValue,
+  value,
+  className,
+  tabClassName,
+  tabsListClassName,
+  tabsContentClassName,
+  onValueChange
+}) {
+  const initialValue = defaultValue ?? tabs[0]?.value;
+  const isControlled = value !== void 0;
+  return /* @__PURE__ */ jsxs(
+    TabsPrimitive.Root,
+    {
+      className: cn("flex flex-col gap-4", className),
+      "data-slot": "tabs",
+      ...isControlled ? {} : { defaultValue: initialValue },
+      value,
+      onValueChange,
+      children: [
+        /* @__PURE__ */ jsx(TabsList, { className: tabsListClassName, children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, disabled: tab.disabled, className: tabClassName, children: tab.label }, tab.value)) }),
+        tabs.map((tab) => {
+          const TabPanel = tab.Content;
+          const shouldRenderPanel = value == null || value === tab.value;
+          return /* @__PURE__ */ jsx(TabsContent, { className: tabsContentClassName, value: tab.value, children: shouldRenderPanel && (TabPanel ? /* @__PURE__ */ jsx(TabPanel, {}) : tab.content) }, tab.value);
+        })
+      ]
+    }
+  );
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "text-gray-chateau hover:text-default hover:bg-hover inline-flex cursor-pointer items-center justify-center gap-1.5 border-b border-transparent px-3 py-2 text-xs font-medium whitespace-nowrap transition-all",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[state=active]:bg-background data-[state=active]:text-success data-[state=active]:border-success border-b-2 data-[state=active]:shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("focus-visible:outline-none", className),
+      ...props
+    }
+  );
+}
+export {
+  Tabs
+};

package/ui/Tabs/index.js

@@ -0,0 +1,4 @@
+import { Tabs } from "./Tabs.js";
+export {
+  Tabs
+};

package/ui/TextTruncate/TextTruncate.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Copy, CopyCheck, ListChevronsDownUp, ListChevronsUpDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+const TextTruncate = ({
+  children,
+  lines = 3,
+  className,
+  textClassName,
+  showToggle = true,
+  showCopy = true
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [needsTruncation, setNeedsTruncation] = useState(false);
+  const [hasBeenTruncated, setHasBeenTruncated] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    const checkTruncation = () => {
+      if (contentRef.current) {
+        const isTruncated = contentRef.current.scrollHeight > contentRef.current.clientHeight;
+        setNeedsTruncation(isTruncated);
+        if (isTruncated && !isExpanded) {
+          setHasBeenTruncated(true);
+        }
+      }
+    };
+    setTimeout(checkTruncation, 0);
+    window.addEventListener("resize", checkTruncation);
+    return () => window.removeEventListener("resize", checkTruncation);
+  }, [children, lines, isExpanded]);
+  const toggleExpanded = () => setIsExpanded((prev) => !prev);
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    toggleExpanded();
+  };
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    try {
+      const textToCopy = typeof children === "string" ? children : contentRef.current?.textContent || "";
+      await navigator.clipboard.writeText(textToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy text:", err);
+    }
+  };
+  const handleKeyDown = (e, handler) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handler(e);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col", className), children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2 break-words", textClassName), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: "w-full select-text",
+        style: isExpanded ? {
+          display: "block",
+          wordBreak: "break-word",
+          whiteSpace: "pre-wrap"
+        } : {
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: lines,
+          overflow: "hidden"
+        },
+        children
+      }
+    ),
+    showToggle && hasBeenTruncated || showCopy ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-inherit pl-1", style: { zIndex: 10 }, children: [
+      showToggle && hasBeenTruncated && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: handleToggle,
+          onKeyDown: (e) => handleKeyDown(e, handleToggle),
+          className: cn(
+            "text-muted-foreground hover:text-success inline-flex cursor-pointer items-center gap-1 text-xs transition-colors hover:scale-105 active:scale-95"
+          ),
+          children: /* @__PURE__ */ jsx(Tooltip, { content: isExpanded ? "Hide text" : "Show text", children: !needsTruncation && isExpanded ? /* @__PURE__ */ jsx(ListChevronsDownUp, { className: "size-3" }) : /* @__PURE__ */ jsx(ListChevronsUpDown, { className: "size-3" }) })
+        }
+      ),
+      showCopy && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: handleCopy,
+          onKeyDown: (e) => handleKeyDown(e, handleCopy),
+          className: cn(
+            "text-muted-foreground hover:text-success inline-flex cursor-pointer items-center justify-center text-xs transition-colors hover:scale-105 active:scale-95",
+            copied && "text-success"
+          ),
+          children: /* @__PURE__ */ jsx(Tooltip, { content: "Copy text", children: copied ? /* @__PURE__ */ jsx(CopyCheck, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" }) })
+        }
+      )
+    ] }) : null
+  ] }) });
+};
+export {
+  TextTruncate
+};

package/ui/TextTruncate/index.js

@@ -0,0 +1,4 @@
+import { TextTruncate } from "./TextTruncate.js";
+export {
+  TextTruncate
+};

package/ui/Textarea/Textarea.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-border bg-secondary placeholder:text-gray-chateau focus-visible:border-ring focus-visible:ring-secondary/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base text-xs shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:ring-success/40 focus-visible:border-success focus-visible:ring-[2px]",
+        "aria-invalid:ring-critical/40 aria-invalid:border-critical aria-invalid:ring-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Textarea
+};

package/ui/Textarea/index.js

@@ -0,0 +1,4 @@
+import { Textarea as Textarea2 } from "./Textarea.js";
+export {
+  Textarea2 as Textarea
+};

package/ui/ThemeToggle/ThemeToggle.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { applyTheme, useDocumentTheme } from "../../lib/theme.js";
+import { Button } from "../Button/Button.js";
+function ThemeToggle() {
+  const theme = useDocumentTheme();
+  const next = theme === "dark" ? "light" : "dark";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      onClick: () => applyTheme(next),
+      className: "btn btn--secondary px-4",
+      "aria-label": "Toggle theme",
+      variant: "secondaryOutline",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: theme === "dark" ? "\u{1F319}" : "\u2600\uFE0F" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: theme === "dark" ? "Dark" : "Light" })
+      ]
+    }
+  );
+}
+export {
+  ThemeToggle
+};

package/ui/ThemeToggle/index.js

@@ -0,0 +1,4 @@
+import { ThemeToggle as ThemeToggle2 } from "./ThemeToggle.js";
+export {
+  ThemeToggle2 as ThemeToggle
+};

package/ui/Toast/Toast.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useDocumentTheme } from "../../lib/theme.js";
+import { Toaster as Sonner } from "sonner";
+const Toaster = ({ ...props }) => {
+  const theme = useDocumentTheme();
+  return /* @__PURE__ */ jsx(
+    Sonner,
+    {
+      theme,
+      className: "toaster group",
+      expand: true,
+      style: {
+        "--normal-bg": "var(--bg-secondary)",
+        "--normal-text": "var(--text-default)",
+        "--normal-border": "var(--border)"
+      },
+      ...props
+    }
+  );
+};
+export {
+  Toaster
+};

package/ui/Toast/index.js

@@ -0,0 +1,4 @@
+import { Toaster } from "./Toast.js";
+export {
+  Toaster
+};

package/ui/Tooltip/Tooltip.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TooltipContent, TooltipParent, TooltipTrigger } from "./TooltipLayout.js";
+const Tooltip = ({
+  children,
+  content,
+  className,
+  classNameArrow,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(TooltipParent, { ...props, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { className, classNameArrow, children: content })
+  ] });
+};
+export {
+  Tooltip
+};

package/ui/Tooltip/TooltipLayout.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/cn.js";
+const TooltipProvider = ({
+  delayDuration = 0,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+};
+const TooltipParent = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+};
+const TooltipTrigger = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+};
+const TooltipContent = ({
+  className,
+  classNameArrow,
+  sideOffset = 0,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 text-default text-2xs bg-tooltip-white text-tooltip-black z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 shadow-md",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          TooltipPrimitive.Arrow,
+          {
+            className: cn(
+              "bg-tooltip-white fill-tooltip-white z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
+              classNameArrow
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  TooltipContent,
+  TooltipParent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/ui/Tooltip/index.js

@@ -0,0 +1,14 @@
+import { Tooltip } from "./Tooltip.js";
+import {
+  TooltipContent,
+  TooltipParent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./TooltipLayout.js";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipParent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/ui/TreeGuide/TreeGuide.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function TreeGuide({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("border-border ml-3 border-l pl-3", className), ...props, children });
+}
+function TreeRow({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative flex min-w-0 items-center gap-1",
+        "before:bg-border before:absolute before:top-1/2 before:-left-3 before:h-px before:w-3 before:-translate-y-1/2",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  TreeGuide,
+  TreeRow
+};

package/ui/TreeGuide/index.js

@@ -0,0 +1,5 @@
+import { TreeGuide as TreeGuide2, TreeRow as TreeRow2 } from "./TreeGuide.js";
+export {
+  TreeGuide2 as TreeGuide,
+  TreeRow2 as TreeRow
+};

package/ui/entries/charts.js

@@ -0,0 +1,2 @@
+export * from "../Charts/index.js";
+export * from "../StatisticCard/index.js";

package/ui/entries/domain.js

@@ -0,0 +1,3 @@
+export * from "../CorrelationTimer/index.js";
+export * from "../Severity/index.js";
+export * from "../SyncProcessBar/index.js";

package/ui/index.js

@@ -0,0 +1,45 @@
+export * from "./Accordion/index.js";
+export * from "./AnimatedDots/index.js";
+export * from "./Aside/index.js";
+export * from "./Badge/index.js";
+export * from "./Button/index.js";
+export * from "./Checkbox/index.js";
+export * from "./ConditionalContent/index.js";
+export * from "./DeleteButtonConfirm/index.js";
+export * from "./Dialog/index.js";
+export * from "./Dropdown/index.js";
+export * from "./EmptyState/index.js";
+export * from "./Field/index.js";
+export * from "./HelperText/index.js";
+export * from "./Input/index.js";
+export * from "./InputNumber/index.js";
+export * from "./InputPassword/index.js";
+export * from "./Label/index.js";
+export * from "./MultiSelect/index.js";
+export * from "./PageHeader/index.js";
+export * from "./Pagination/index.js";
+export * from "./RadioGroup/index.js";
+export * from "./ScrollArea/index.js";
+export * from "./SearchInput/index.js";
+export * from "./SearchInputFields/index.js";
+export * from "./Select/index.js";
+export * from "./Separator/index.js";
+export * from "./Skeleton/index.js";
+export * from "./Slider/index.js";
+export * from "./Spinner/index.js";
+export * from "./SpinnerSquare/index.js";
+export * from "./Suggestions/index.js";
+export * from "./Switch/index.js";
+export * from "./Table/index.js";
+export * from "./Tabs/index.js";
+export * from "./TextTruncate/index.js";
+export * from "./Textarea/index.js";
+export * from "./ThemeToggle/index.js";
+export * from "./Toast/index.js";
+export * from "./Tooltip/index.js";
+export * from "./TreeGuide/index.js";
+import { applyTheme, useDocumentTheme } from "../lib/theme.js";
+export {
+  applyTheme,
+  useDocumentTheme
+};