@socprime/react-ui 0.0.5

package/ui/Suggestions/Suggestions.js

@@ -0,0 +1,244 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import { cn } from "../../lib/cn.js";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Check, XIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+const Suggestions = ({
+  options,
+  value = "",
+  placeholder = "Start typing...",
+  id,
+  name,
+  className,
+  disabled = false,
+  loading = false,
+  dropdownClassName,
+  minChars = 0,
+  showAllOnFocus = true,
+  allowCustomValue = false,
+  onChange
+}) => {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const lastSelectedValueRef = useRef("");
+  const isSelectingRef = useRef(false);
+  const isFocusedRef = useRef(false);
+  const inputValueRef = useRef("");
+  const setInputValueSync = (val) => {
+    inputValueRef.current = val;
+    setInputValue(val);
+  };
+  useEffect(() => {
+    if (isFocusedRef.current) {
+      return;
+    }
+    const selectedOption = options.find((opt) => opt.value === value);
+    setInputValueSync(selectedOption ? selectedOption.label : value);
+    lastSelectedValueRef.current = value ?? "";
+  }, [value, options]);
+  const labelCounts = useMemo(() => {
+    return options.reduce((acc, option) => {
+      const key = option.label.toLowerCase();
+      acc[key] = (acc[key] || 0) + 1;
+      return acc;
+    }, {});
+  }, [options]);
+  const filteredOptions = useMemo(() => {
+    const query = inputValueRef.current;
+    if (!query || query.length < minChars) {
+      return showAllOnFocus ? options : [];
+    }
+    const lower = query.toLowerCase();
+    return options.filter(
+      (option) => option.label.toLowerCase().includes(lower) || (labelCounts[option.label.toLowerCase()] || 0) > 1 && option.value.toLowerCase().includes(lower)
+    );
+  }, [options, inputValue, minChars, showAllOnFocus, labelCounts]);
+  const handleInputChange = (newValue) => {
+    setInputValueSync(newValue);
+    setHighlightedIndex(-1);
+    if (newValue.length >= minChars || showAllOnFocus && newValue.length === 0) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+    if (allowCustomValue) {
+      onChange(newValue);
+    }
+  };
+  const handleSelectOption = (option) => {
+    isSelectingRef.current = true;
+    setInputValueSync(option.label);
+    onChange(option.value);
+    lastSelectedValueRef.current = option.value;
+    setOpen(false);
+    inputRef.current?.blur();
+    setTimeout(() => {
+      isSelectingRef.current = false;
+    }, 200);
+  };
+  const handleInputFocus = () => {
+    isFocusedRef.current = true;
+    setHighlightedIndex(-1);
+    if (showAllOnFocus || inputValueRef.current.length >= minChars) {
+      setOpen(true);
+    }
+  };
+  const handleInputBlur = () => {
+    isFocusedRef.current = false;
+    setTimeout(() => {
+      if (isSelectingRef.current) {
+        return;
+      }
+      setOpen(false);
+      const currentInputValue = inputValueRef.current;
+      if (!allowCustomValue && currentInputValue) {
+        const exactMatches = options.filter(
+          (opt) => opt.label.toLowerCase() === currentInputValue.toLowerCase()
+        );
+        if (exactMatches.length > 1) {
+          const currentOption = options.find((opt) => opt.value === value);
+          if (currentOption && exactMatches.some((opt) => opt.value === currentOption.value)) {
+            setInputValueSync(currentOption.label);
+          } else {
+            setInputValueSync(exactMatches[0].label);
+            onChange(exactMatches[0].value);
+            lastSelectedValueRef.current = exactMatches[0].value;
+          }
+        } else if (exactMatches.length === 1) {
+          setInputValueSync(exactMatches[0].label);
+          onChange(exactMatches[0].value);
+          lastSelectedValueRef.current = exactMatches[0].value;
+        } else {
+          const currentOption = options.find((opt) => opt.value === value);
+          const lastSelectedOption = lastSelectedValueRef.current ? options.find((opt) => opt.value === lastSelectedValueRef.current) : void 0;
+          if (currentOption) {
+            setInputValueSync(currentOption.label);
+          } else if (lastSelectedOption) {
+            setInputValueSync(lastSelectedOption.label);
+            onChange(lastSelectedOption.value);
+          } else {
+            setInputValueSync("");
+          }
+        }
+      }
+    }, 150);
+  };
+  const handleKeyDown = (e) => {
+    if (!open || filteredOptions.length === 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => prev > 0 ? prev - 1 : -1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+          handleSelectOption(filteredOptions[highlightedIndex]);
+        } else if (filteredOptions.length > 0) {
+          handleSelectOption(filteredOptions[0]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        inputRef.current?.blur();
+        break;
+      default:
+        break;
+    }
+  };
+  const isSelected = (option) => {
+    return option.value === value;
+  };
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          type: "text",
+          id,
+          name,
+          value: inputValue,
+          loading,
+          onChange: (e) => handleInputChange(e.target.value),
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur,
+          onKeyDown: handleKeyDown,
+          disabled,
+          placeholder,
+          className: cn("pr-7 text-xs", className)
+        }
+      ),
+      inputValue && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "xxs",
+          "aria-label": "Clear",
+          className: "absolute top-1/2 right-2 -translate-y-1/2 px-1 text-xs hover:bg-transparent",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            setInputValueSync("");
+            onChange("");
+            lastSelectedValueRef.current = "";
+            inputRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        className: cn(
+          "bg-secondary border-border text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 z-50 rounded-md border shadow-md outline-none",
+          dropdownClassName || "w-[var(--radix-popover-anchor-width)]"
+        ),
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[300px]", children: /* @__PURE__ */ jsx("div", { className: "p-1", children: filteredOptions.map((option, index) => {
+          const selected = isSelected(option);
+          const isDuplicateLabel = (labelCounts[option.label.toLowerCase()] || 0) > 1;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onMouseDown: (e) => {
+                e.preventDefault();
+                if (!option.disabled) {
+                  handleSelectOption(option);
+                }
+              },
+              onMouseEnter: () => setHighlightedIndex(index),
+              className: cn(
+                'focus:text-default [&_svg:not([class*="text-"])]:text-subdued focus:bg-hover relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-left text-xs outline-hidden transition-colors select-none',
+                "hover:bg-hover",
+                highlightedIndex === index && "bg-hover",
+                selected && "bg-hover",
+                option.disabled && "pointer-events-none opacity-50"
+              ),
+              children: [
+                option.label,
+                isDuplicateLabel && /* @__PURE__ */ jsx("span", { className: "text-subdued text-[10px]", children: option.value }),
+                selected && /* @__PURE__ */ jsx(Check, { className: "absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2" })
+              ]
+            },
+            `${option.value}-${index}`
+          );
+        }) }) })
+      }
+    ) })
+  ] });
+};
+export {
+  Suggestions
+};

package/ui/Suggestions/index.js

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

package/ui/Switch/Switch.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { cn } from "../../lib/cn.js";
+import { cva } from "class-variance-authority";
+const switchVariants = cva(
+  "peer data-[state=checked]:bg-success data-[state=unchecked]:bg-comet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 disabled:bg-gray-chateau inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-20",
+  {
+    variants: {
+      size: {
+        s: "h-3.5 w-6",
+        m: "h-[1.15rem] w-8",
+        l: "h-6 w-11",
+        xl: "h-7 w-14"
+      }
+    },
+    defaultVariants: {
+      size: "m"
+    }
+  }
+);
+const switchThumbVariants = cva(
+  "bg-primary data-[state=unchecked]:bg-primary data-[state=checked]:bg-primary pointer-events-none block rounded-full ring-0 transition-transform data-[state=unchecked]:translate-x-0 disabled:bg-border",
+  {
+    variants: {
+      size: {
+        s: "size-3 data-[state=checked]:translate-x-[calc(100%-2px)]",
+        m: "size-4 data-[state=checked]:translate-x-[calc(100%-2px)]",
+        l: "size-5 data-[state=checked]:translate-x-[110%]",
+        xl: "size-6 data-[state=checked]:translate-x-[125%]"
+      }
+    },
+    defaultVariants: {
+      size: "m"
+    }
+  }
+);
+const Switch = ({
+  className,
+  thumbClassName,
+  tooltip,
+  size,
+  ...props
+}) => {
+  const element = /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(switchVariants({ size }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(switchThumbVariants({ size }), thumbClassName)
+        }
+      )
+    }
+  );
+  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: element }) : element;
+};
+export {
+  Switch
+};

package/ui/Switch/index.js

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

package/ui/SyncProcessBar/SyncProcessBar.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+const SyncProcessBar = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "border-border bg-secondary overflow-hidden rounded-lg border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: "text-success size-4 animate-spin" }),
+      /* @__PURE__ */ jsx("span", { className: "text-gray-chateau text-xs", children: "Synchronization In Progress" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-primary relative h-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "animate-progress from-success/0 via-success to-success/0 absolute top-0 left-0 h-full w-2/5 bg-gradient-to-r" }) })
+  ] });
+};
+export {
+  SyncProcessBar
+};

package/ui/SyncProcessBar/index.js

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

package/ui/Table/GroupHeaderRow.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../Badge/Badge.js";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { TableCell, TableRow } from "./Table.js";
+const GroupHeaderRow = ({
+  colSpan,
+  label,
+  count,
+  isExpanded,
+  onToggle
+}) => {
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      className: "bg-secondary hover:bg-secondary/50 border-border cursor-pointer border-b transition-colors",
+      onClick: onToggle,
+      children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-medium", children: [
+        isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "text-gray-chateau h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "text-gray-chateau h-4 w-4" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-default text-s", children: label || "Unknown" }),
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "secondary",
+              className: "text-2xs text-gray-chateau bg-border/50 rounded-full",
+              children: count
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+};
+export {
+  GroupHeaderRow
+};

package/ui/Table/RowGrouped.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { GroupHeaderRow } from "./GroupHeaderRow.js";
+const RowGrouped = ({ row, table }) => {
+  const groupValue = row.getVisibleCells()[0]?.getValue();
+  const label = groupValue != null && groupValue !== "" ? String(groupValue) : "Unknown";
+  return /* @__PURE__ */ jsx(
+    GroupHeaderRow,
+    {
+      colSpan: row.getVisibleCells().length - table.getState().grouping.length,
+      label,
+      count: row.subRows.length,
+      isExpanded: row.getIsExpanded(),
+      onToggle: row.getToggleExpandedHandler()
+    }
+  );
+};
+export {
+  RowGrouped
+};

package/ui/Table/ServerGroupedTableBody.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { flexRender } from "@tanstack/react-table";
+import { DatabaseIcon } from "lucide-react";
+import { motion } from "motion/react";
+import { Fragment } from "react";
+import { getColumnStyle } from "./columnStyle.js";
+import { GroupHeaderRow } from "./GroupHeaderRow.js";
+import { TableBody, TableCell, TableRow } from "./Table.js";
+const resolveRowId = (table, item, index) => {
+  const getRowId = table.options.getRowId;
+  if (typeof getRowId === "function") {
+    return getRowId(item, index, void 0);
+  }
+  return String(index);
+};
+const ServerGroupedTableBody = ({
+  groups,
+  expandedGroups,
+  onToggleGroup,
+  table,
+  columnsCount,
+  classNameCell
+}) => {
+  if (!groups.length) {
+    return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: columnsCount, className: "h-24 text-center", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        Icon: DatabaseIcon,
+        title: "No data",
+        description: "Results will be displayed here after you add some data"
+      }
+    ) }) }) });
+  }
+  return /* @__PURE__ */ jsx(TableBody, { children: groups.map(([groupKey, items], groupIndex) => {
+    const isExpanded = expandedGroups[groupKey] ?? false;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        GroupHeaderRow,
+        {
+          colSpan: columnsCount,
+          label: groupKey,
+          count: items.length,
+          isExpanded,
+          onToggle: () => onToggleGroup(groupKey)
+        }
+      ),
+      isExpanded && items.map((item, itemIndex) => {
+        const rowId = resolveRowId(table, item, itemIndex);
+        const row = table.getRow(rowId);
+        if (!row) {
+          return null;
+        }
+        const rowAnimationIndex = groupIndex + itemIndex;
+        return /* @__PURE__ */ jsx(
+          motion.tr,
+          {
+            className: cn("hover:bg-hover/20 border-border border-b transition-colors"),
+            initial: { opacity: 0, x: -50 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -50 },
+            transition: {
+              duration: 0.3,
+              delay: rowAnimationIndex * 0.05,
+              ease: [0.16, 1, 0.3, 1]
+            },
+            children: row.getVisibleCells().map((cell) => {
+              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
+        );
+      })
+    ] }, groupKey);
+  }) });
+};
+export {
+  ServerGroupedTableBody
+};

package/ui/Table/SortableHeader.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+const SortableHeader = ({
+  header,
+  isSortingEnabled
+}) => {
+  const canSort = header.column.getCanSort();
+  const isSorted = header.column.getIsSorted();
+  const sortDirection = isSorted === "asc" ? "asc" : isSorted === "desc" ? "desc" : null;
+  if (!canSort || !isSortingEnabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "flex flex-col",
+        !isSorted && "opacity-0 transition-opacity group-hover:opacity-100"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ChevronUpIcon,
+          {
+            className: cn(
+              "size-3",
+              sortDirection === "asc" ? "text-success" : "text-subdued opacity-30"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: cn(
+              "-mt-1 size-3",
+              sortDirection === "desc" ? "text-success" : "text-subdued opacity-30"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SortableHeader
+};

package/ui/Table/Table.js

@@ -0,0 +1,110 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+const Table = ({
+  className,
+  classNameTable,
+  orientation = "both",
+  classNameScrollArea,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("border-border bg-primary flex overflow-hidden rounded-md border", className),
+      children: /* @__PURE__ */ jsx(ScrollArea, { className: cn("w-1 flex-1", classNameScrollArea), orientation, children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom", classNameTable),
+          ...props
+        }
+      ) })
+    }
+  );
+};
+const TableHeader = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
+};
+const TableBody = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+};
+const TableFooter = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  );
+};
+const TableRow = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-hover/20 data-[state=selected]:bg-secondary/80 border-border border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+};
+const TableHead = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-subdued text-2xs px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+};
+const TableCell = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle [&:has([role=checkbox])]:pr-2 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+};
+const TableCaption = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("text-muted-foreground mt-4 text-sm", className),
+      ...props
+    }
+  );
+};
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};