@socprime/react-ui 0.0.5

package/ui/Badge/Badge.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-2xs transition-colors focus:outline-none",
+  {
+    variants: {
+      variant: {
+        yellow: "border-yellow/20 font-normal text-2xs bg-yellow/10 text-yellow shadow hover:bg-yellow/20",
+        purple: "border-purple/20 font-normal text-2xs bg-purple/10 text-default shadow hover:bg-purple/20",
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        dark: "border-border bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        defaultOutline: "border-border bg-primary text-primary-foreground shadow hover:bg-secondary",
+        warning: "border-warning/20 font-normal text-2xs bg-warning/10 text-default shadow hover:bg-warning/20",
+        critical: "border-critical/20 font-normal text-2xs bg-critical/10 text-default shadow hover:bg-critical/20",
+        secondary: "border-border bg-secondary text-subdued hover:bg-secondary/80",
+        outline: "text-foreground border-border",
+        success: "border-success/20 font-normal text-2xs bg-success/10 text-default shadow hover:bg-success/20",
+        lightBlue: "border-light-blue/20 font-normal text-2xs bg-light-blue/10 text-default shadow hover:bg-light-blue/20",
+        redViolet: "border-red-violet/20 font-normal text-2xs bg-red-violet/10 text-default shadow hover:bg-red-violet/20"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, onRemove, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(badgeVariants({ variant }), className), ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            onRemove();
+          }
+        },
+        className: "hover:text-default/30 focus:ring-success/40 ml-1 cursor-pointer rounded-sm focus:ring-2 focus:outline-none",
+        children: /* @__PURE__ */ jsx(XIcon, { className: "size-3 text-inherit" })
+      }
+    )
+  ] });
+}
+export {
+  Badge,
+  badgeVariants
+};

package/ui/Badge/index.js

@@ -0,0 +1,5 @@
+import { Badge, badgeVariants } from "./Badge.js";
+export {
+  Badge,
+  badgeVariants
+};

package/ui/Button/Button.css

@@ -0,0 +1 @@
+.btn:not(.disabled),.btn:not(disabled){cursor:pointer}.btn:disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.btn--icon:disabled{pointer-events:all;background-color:rgba(0,0,0,0);color:var(--color-subdued)}.btn[aria-invalid=true]{box-shadow:0 0 0 3px var(--color-destructive);border-color:var(--color-destructive)}.btn svg{pointer-events:none;flex-shrink:0}.btn svg:not([class*=size-]):not([width]):not([height]){width:1em;height:1em}

package/ui/Button/Button.js

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Slot } from "@radix-ui/react-slot";
+import { Loader2 } from "lucide-react";
+import React from "react";
+import { cva } from "class-variance-authority";
+import { Link } from "react-router-dom";
+import "./Button.css";
+const buttonVariants = cva(
+  "flex items-center justify-center gap-2 whitespace-nowrap rounded-xs border-1 transition-all duration-200 outline-none rounded-s",
+  {
+    variants: {
+      variant: {
+        primary: "btn px-4 border-btn-primary bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-primary-active disabled:bg-btn-primary-disabled disabled:border-btn-primary-disabled disabled:text-subdued text-dark",
+        primaryOutline: "btn px-4 border-btn-primary bg-transparent hover:bg-btn-primary/10 hover:border-btn-primary/50 active:bg-btn-primary/20 disabled:border-btn-primary-disabled disabled:bg-transparent dark:text-default light:text-dark",
+        secondary: "btn px-4 border-border bg-btn-secondary hover:bg-btn-secondary-hover/30 active:bg-btn-secondary-active disabled:bg-btn-secondary-disabled dark:text-subdued light:hover:text-default light:text-dark",
+        secondaryOutline: "btn px-4 border-border bg-hover/20 hover:bg-hover/60 active:bg-btn-secondary/20 disabled:border-btn-secondary-disabled disabled:bg-transparent dark:text-subdued light:text-dark ring-0",
+        criticalOutline: "btn px-4 border-btn-destructive/30 bg-transparent hover:bg-btn-destructive-hover/20 hover:border-btn-destructive/30 active:bg-btn-destructive-active/20 disabled:border-critical/70 disabled:bg-transparent text-critical/90 hover:text-critical disabled:text-critical/70",
+        ghost: "btn px-4 border-transparent bg-transparent text-foreground [&_svg]:text-subdued active:bg-btn-primary/10 active:border-btn-primary/5 [&.is-active]:bg-transparent [&.is-active]:border-btn-primary/50 [&.is-active_svg]:text-btn-primary [&:active_svg]:text-btn-primary hover:bg-btn-ghost hover:[&:not(.is-active)_svg]:text-subdued",
+        outline: "btn px-4 btn--outline",
+        icon: "btn px-1 btn--icon border-transparent dark:text-subdued light:text-dark hover:bg-hover dark:hover:text-success",
+        custom: ""
+      },
+      size: {
+        xxs: "h-6",
+        xs: "h-7",
+        s: "h-8",
+        m: "h-9",
+        l: "h-10",
+        xl: "h-11",
+        lg: "h-12",
+        custom: ""
+      }
+    },
+    compoundVariants: [
+      { variant: "icon", size: "xxs", className: "w-6" },
+      { variant: "icon", size: "xs", className: "w-7" },
+      { variant: "icon", size: "s", className: "w-8" },
+      { variant: "icon", size: "m", className: "w-9" },
+      { variant: "icon", size: "l", className: "w-10" },
+      { variant: "icon", size: "xl", className: "w-11" },
+      { variant: "icon", size: "lg", className: "w-12" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "m"
+    }
+  }
+);
+const Button = ({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading,
+  children,
+  disabled,
+  to,
+  href,
+  ...props
+}) => {
+  const classes = buttonVariants({ variant, size, className });
+  const processedChildren = loading && React.Children.count(children) > 0 ? (() => {
+    const childrenArray = React.Children.toArray(children);
+    const firstChild = childrenArray[0];
+    if (React.isValidElement(firstChild)) {
+      return [
+        /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }, "loader"),
+        ...childrenArray.slice(1)
+      ];
+    }
+    return [/* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }, "loader"), ...childrenArray];
+  })() : children;
+  const commonProps = {
+    "data-slot": "button",
+    className: cn(classes, loading && "opacity-50"),
+    children: processedChildren
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { ...commonProps, ...props });
+  }
+  if (to) {
+    return /* @__PURE__ */ jsx(Link, { to, ...commonProps, ...props });
+  }
+  if (href) {
+    const { className: anchorClassName, ...anchorProps } = props;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        ...commonProps,
+        ...anchorProps,
+        className: cn(commonProps.className, anchorClassName)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...commonProps,
+      ...props,
+      disabled: disabled || loading
+    }
+  );
+};
+export {
+  Button,
+  buttonVariants
+};

package/ui/Button/index.js

@@ -0,0 +1,5 @@
+import { Button, buttonVariants } from "./Button.js";
+export {
+  Button,
+  buttonVariants
+};

package/ui/Charts/AreaChartWithGradient.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThemeColors } from "../../lib/useThemeColors.js";
+import { memo } from "react";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+const isPaddingPoint = (point) => point.name === "";
+const normalizeSinglePointData = (data) => {
+  if (data.length !== 1) {
+    return data;
+  }
+  const [point] = data;
+  return [
+    { name: point.name, value: point.value },
+    point,
+    { name: point.name, value: point.value }
+  ];
+};
+const AreaChartWithGradientComponent = ({
+  data,
+  color,
+  height = 300
+}) => {
+  const { primary, border, default: textDefault } = useThemeColors();
+  const gradientId = `gradient-${color.replace("#", "")}`;
+  const chartData = normalizeSinglePointData(data);
+  const isSinglePoint = data.length === 1;
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: isSinglePoint ? 15 : height, children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color, stopOpacity: 0.8 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color, stopOpacity: 0.1 })
+    ] }) }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: "name", hide: true }),
+    /* @__PURE__ */ jsx(YAxis, { hide: true }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        contentStyle: {
+          backgroundColor: primary,
+          border: `1px solid ${border}`,
+          borderRadius: "6px",
+          fontSize: "12px",
+          padding: "8px 12px",
+          color: textDefault
+        },
+        formatter: (value, _name, item) => {
+          const point = item?.payload;
+          if (point && isPaddingPoint(point)) {
+            return null;
+          }
+          return value;
+        },
+        labelFormatter: (label) => label === "" ? "" : label,
+        cursor: { stroke: color, strokeWidth: 1, strokeDasharray: "4 4" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: isSinglePoint ? "linear" : "monotone",
+        dataKey: "value",
+        stroke: color,
+        fillOpacity: 1,
+        fill: `url(#${gradientId})`,
+        strokeWidth: 2,
+        activeDot: {
+          r: 4,
+          fill: color,
+          stroke: color,
+          strokeWidth: 1,
+          strokeDasharray: "4 4",
+          opacity: 0.7
+        }
+      }
+    )
+  ] }) });
+};
+const AreaChartWithGradient = memo(AreaChartWithGradientComponent);
+export {
+  AreaChartWithGradient
+};

package/ui/Charts/index.js

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

package/ui/Checkbox/Checkbox.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const Checkbox = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-border bg-secondary data-[state=checked]:bg-success data-[state=checked]:text-dark focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+};
+export {
+  Checkbox
+};

package/ui/Checkbox/index.js

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

package/ui/ConditionalContent/ConditionalContent.js

@@ -0,0 +1,10 @@
+const ConditionalContent = ({
+  loading,
+  loadingContent,
+  loadedContent
+}) => {
+  return loading ? loadingContent : loadedContent;
+};
+export {
+  ConditionalContent
+};

package/ui/ConditionalContent/index.js

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

package/ui/CorrelationTimer/CorrelationTimer.js

@@ -0,0 +1,62 @@
+import { jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Badge } from "../Badge/Badge.js";
+const CorrelationTimer = ({ isRunning, runningTime }) => {
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  useEffect(() => {
+    if (!isRunning) {
+      setElapsedSeconds(0);
+      return;
+    }
+    const syncAt = Date.now();
+    const isTimestamp = runningTime != null && runningTime > 1e12;
+    const calculateElapsed = () => {
+      if (runningTime == null) {
+        return Math.floor((Date.now() - syncAt) / 1e3);
+      }
+      if (isTimestamp) {
+        return Math.floor((Date.now() - runningTime) / 1e3);
+      }
+      return runningTime + Math.floor((Date.now() - syncAt) / 1e3);
+    };
+    setElapsedSeconds(calculateElapsed());
+    const interval = setInterval(() => {
+      setElapsedSeconds(calculateElapsed());
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [isRunning, runningTime]);
+  const formatTime = (seconds) => {
+    if (seconds < 60) {
+      return `${seconds}s`;
+    }
+    if (seconds < 3600) {
+      const minutes = Math.floor(seconds / 60);
+      return `${minutes}m`;
+    }
+    if (seconds < 86400) {
+      const hours = Math.floor(seconds / 3600);
+      return `${hours}h`;
+    }
+    if (seconds < 2592e3) {
+      const days = Math.floor(seconds / 86400);
+      return `${days}d`;
+    }
+    if (seconds < 31536e3) {
+      const months = Math.floor(seconds / 2592e3);
+      return `${months}mo`;
+    }
+    const years = Math.floor(seconds / 31536e3);
+    return `${years}y`;
+  };
+  return /* @__PURE__ */ jsxs(Badge, { className: "text-success", variant: "success", children: [
+    "Running",
+    /* @__PURE__ */ jsxs("span", { children: [
+      "(",
+      formatTime(elapsedSeconds),
+      ")"
+    ] })
+  ] });
+};
+export {
+  CorrelationTimer
+};

package/ui/CorrelationTimer/index.js

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

package/ui/DeleteButtonConfirm/DeleteButtonConfirm.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ConfirmDeleteDialog } from "../Dialog/ConfirmDialog.js";
+import { TrashIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../Button/Button.js";
+const DeleteButtonConfirm = ({
+  loading,
+  isOpen,
+  title,
+  message,
+  onOpen,
+  onClose,
+  onConfirm
+}) => {
+  const [isOpenLocal, setIsOpenLocal] = useState(false);
+  const handleOpen = () => {
+    if (onOpen) {
+      onOpen();
+    } else {
+      setIsOpenLocal(true);
+    }
+  };
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      setIsOpenLocal(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "criticalOutline",
+        className: "text-xs",
+        size: "l",
+        onClick: handleOpen,
+        type: "button",
+        disabled: loading,
+        children: [
+          /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" }),
+          "Delete"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ConfirmDeleteDialog,
+      {
+        loading,
+        isOpen: isOpen !== void 0 ? isOpen : isOpenLocal,
+        onClose: handleClose,
+        onConfirm,
+        title,
+        message: /* @__PURE__ */ jsxs(Fragment, { children: [
+          'Are you sure you want to delete "',
+          message,
+          '"? This action cannot be undone.'
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  DeleteButtonConfirm
+};

package/ui/DeleteButtonConfirm/index.js

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

package/ui/Dialog/ConfirmDialog.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./Dialog.js";
+const ConfirmDeleteDialog = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  loading = false
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "border-border bg-secondary sm:max-w-[500px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-default", children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: message })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-subdued px-6 text-xs", children: message }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "text-xs",
+          type: "button",
+          onClick: onClose,
+          variant: "secondaryOutline",
+          disabled: loading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "text-xs",
+          type: "button",
+          onClick: onConfirm,
+          variant: "criticalOutline",
+          loading,
+          children: "Delete"
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  ConfirmDeleteDialog,
+  ConfirmDeleteDialog as ConfirmDialog
+};

package/ui/Dialog/DefaultDialog.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./Dialog.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import { cn } from "../../lib/cn.js";
+import { XIcon } from "lucide-react";
+const DefaultDialog = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  confirmText = "Confirm",
+  confirmVariant = "primary",
+  cancelText = "Cancel",
+  disabled = false,
+  title,
+  children,
+  loading = false,
+  className,
+  classNameHeader,
+  classNameTitle,
+  classNameCloseButton,
+  hideFooter = true,
+  scrollable = false,
+  scrollAreaClassName = "",
+  titleDescription
+}) => {
+  const content = scrollable ? /* @__PURE__ */ jsx(ScrollArea, { className: cn("max-h-[calc(100vh-8rem)]", scrollAreaClassName), children: /* @__PURE__ */ jsx("div", { className: "pr-4", children }) }) : children;
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: cn(
+        "border-border bg-secondary sm:max-w-[500px]",
+        scrollable && "flex flex-col",
+        className
+      ),
+      hideCloseButton: true,
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: cn(scrollable ? "shrink-0" : "", classNameHeader), children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-default", classNameTitle), children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: titleDescription })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { className: cn("absolute top-6 right-4 left-auto bottom-auto", classNameCloseButton), variant: "icon", size: "xxs", onClick: onClose, children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx("div", { className: cn(scrollable && "min-h-0 flex-1"), children: content }),
+        !hideFooter && /* @__PURE__ */ jsxs(DialogFooter, { className: cn("gap-2 py-5", scrollable && "shrink-0"), children: [
+          onClose && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "text-xs",
+              type: "button",
+              onClick: onClose,
+              variant: "secondaryOutline",
+              disabled: disabled || loading,
+              children: cancelText
+            }
+          ),
+          onConfirm && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "text-xs",
+              type: "button",
+              onClick: onConfirm,
+              variant: confirmVariant,
+              loading,
+              disabled,
+              children: confirmText
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  DefaultDialog
+};