@socprime/react-ui 0.0.5

package/ui/SearchInputFields/SearchInputFields.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DropdownsSelect } from "../Dropdown/DropdownsSelect.js";
+import { cn } from "../../lib/cn.js";
+import { SearchIcon, XIcon } from "lucide-react";
+import { Input } from "../Input/Input.js";
+const SearchInputFields = ({
+  loading,
+  className,
+  classNamesInput,
+  value,
+  placeholder,
+  options,
+  valueSelect,
+  onChangeSelect,
+  onChange,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 left-2 z-1 flex size-4 -translate-y-[60%] items-center", children: /* @__PURE__ */ jsx(SearchIcon, { className: "text-subdued h-4 w-4" }) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-8 z-1 flex h-10 w-26 -translate-y-1/2 items-center", children: /* @__PURE__ */ jsx(
+      DropdownsSelect,
+      {
+        className: "border-r-border w-inherit h-6 rounded-none border-0 border-r bg-transparent px-2 text-xs shadow-none hover:bg-transparent",
+        options,
+        value: valueSelect,
+        onChange: onChangeSelect
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        loading,
+        type: "text",
+        className: cn("pr-7 pl-40", classNamesInput),
+        placeholder: placeholder || "Search...",
+        ...props,
+        value,
+        onChange
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "absolute inset-y-0 right-2 flex cursor-pointer items-center",
+        onClick: () => onChange?.({ target: { value: "" } }),
+        children: /* @__PURE__ */ jsx(XIcon, { className: "text-subdued hover:text-foreground h-4 w-4" })
+      }
+    )
+  ] });
+};
+export {
+  SearchInputFields
+};

package/ui/SearchInputFields/index.js

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

package/ui/Select/Select.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, Loader2 } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  loading,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-border data-[placeholder]:text-gray-chateau bg-secondary [&_svg:not([class*='text-'])]:text-gray-chateau focus-visible:border-success focus-visible:ring-success/40 aria-invalid:ring-critical/40 aria-invalid:border-destructive flex h-[36px] w-full items-center justify-between gap-2 rounded-md border px-3 py-1 text-xs font-normal whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        loading ? /* @__PURE__ */ jsx(Loader2, { className: "text-gray-chateau size-4 animate-spin" }) : /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-75 text-inherit" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      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 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("text-subdued px-2 py-1.5 text-xs", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      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-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};

package/ui/Select/SelectDefault.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./Select.js";
+const SelectDefault = ({
+  id,
+  name,
+  options,
+  placeholder,
+  className,
+  value,
+  loading,
+  disabled,
+  style,
+  renderItemLabel,
+  renderTriggerLabel,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        id,
+        name,
+        className: cn("relative w-full", className),
+        disabled,
+        loading,
+        style,
+        children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value && renderTriggerLabel ? renderTriggerLabel(value) : void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: options.filter((option) => option.value !== "").map((option) => /* @__PURE__ */ jsx(SelectItem, { className: "cursor-pointer", value: option.value, children: renderItemLabel ? renderItemLabel(option.value) : option.label }, option.value)) }) })
+  ] });
+};
+export {
+  SelectDefault
+};

package/ui/Select/index.js

@@ -0,0 +1,26 @@
+import {
+  Select as Select2,
+  SelectContent as SelectContent2,
+  SelectGroup as SelectGroup2,
+  SelectItem as SelectItem2,
+  SelectLabel as SelectLabel2,
+  SelectScrollDownButton as SelectScrollDownButton2,
+  SelectScrollUpButton as SelectScrollUpButton2,
+  SelectSeparator as SelectSeparator2,
+  SelectTrigger as SelectTrigger2,
+  SelectValue as SelectValue2
+} from "./Select.js";
+import { SelectDefault } from "./SelectDefault.js";
+export {
+  Select2 as Select,
+  SelectContent2 as SelectContent,
+  SelectDefault,
+  SelectGroup2 as SelectGroup,
+  SelectItem2 as SelectItem,
+  SelectLabel2 as SelectLabel,
+  SelectScrollDownButton2 as SelectScrollDownButton,
+  SelectScrollUpButton2 as SelectScrollUpButton,
+  SelectSeparator2 as SelectSeparator,
+  SelectTrigger2 as SelectTrigger,
+  SelectValue2 as SelectValue
+};

package/ui/Separator/Separator.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
+import { cn } from "../../lib/cn.js";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Separator
+};

package/ui/Separator/index.js

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

package/ui/Severity/Severity.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { arrowIcon, severityTextColor } from "./utils.js";
+const Severity = ({ severity, className, arrowClassName }) => {
+  const Arrow = arrowIcon(severity);
+  const localArrowClassName = cn("size-3.5", arrowClassName, severityTextColor(severity));
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex", className), children: /* @__PURE__ */ jsx(Arrow, { className: localArrowClassName }) });
+};
+export {
+  Severity
+};

package/ui/Severity/index.js

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

package/ui/Severity/utils.js

@@ -0,0 +1,53 @@
+import {
+  ArrowDownRightIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  ArrowUpRightIcon
+} from "lucide-react";
+const severityColor = (severity) => {
+  switch (severity) {
+    case "Low":
+      return "success";
+    case "Medium":
+      return "yellow";
+    case "High":
+      return "warning";
+    case "Critical":
+      return "critical";
+    default:
+      return "success";
+  }
+};
+const severityTextColor = (severity) => {
+  switch (severity) {
+    case "Low":
+      return "text-light-blue";
+    case "Medium":
+      return "text-yellow";
+    case "High":
+      return "text-warning";
+    case "Critical":
+      return "text-critical";
+    default:
+      return "text-gray-chateau";
+  }
+};
+const arrowIcon = (severity) => {
+  switch (severity) {
+    case "Low":
+      return ArrowDownRightIcon;
+    case "Medium":
+      return ArrowRightIcon;
+    case "High":
+      return ArrowUpRightIcon;
+    case "Critical":
+      return ArrowUpIcon;
+    default:
+      return ArrowDownRightIcon;
+  }
+};
+export {
+  arrowIcon,
+  severityColor,
+  severityTextColor
+};

package/ui/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Fragment } from "react/jsx-runtime";
+import { TableBody, TableCell, TableRow } from "../Table/Table.js";
+const Skeleton = ({ className, rows, ...props }) => {
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-hover animate-pulse rounded-md", className),
+      ...props
+    }
+  );
+  if (rows) {
+    return Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx(Fragment, { children: content }, row.toString()));
+  }
+  return content;
+};
+const SkeletonTable = ({ className, rows = 10, columns = 5 }) => {
+  return /* @__PURE__ */ jsx(TableBody, { className, children: Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columns }).map((_2, column) => /* @__PURE__ */ jsx(TableCell, { className: "border-transparent px-6 py-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, column.toString()) }, column.toString())) }, row.toString())) });
+};
+export {
+  Skeleton,
+  SkeletonTable
+};

package/ui/Skeleton/index.js

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

package/ui/Slider/Slider.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+const Slider = ({
+  className,
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  value = [50],
+  showValue = true,
+  unit = "",
+  onValueChange,
+  formatValue,
+  ...props
+}) => {
+  const displayValue = formatValue ? formatValue(value[0]) : `${value[0]}${unit}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-subdued text-xs font-medium", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-default text-xs font-semibold", children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        className: cn("relative flex w-full touch-none items-center select-none", className),
+        min,
+        max,
+        step,
+        value,
+        onValueChange,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "bg-border relative h-1.5 w-full grow overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "bg-btn-primary absolute h-full" }) }),
+          /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              className: cn(
+                "border-primary bg-success ring-offset-secondary focus-visible:ring-btn-primary block h-3.5 w-3.5 rounded-full border border-2 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Slider
+};

package/ui/Slider/index.js

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

package/ui/Spinner/Spinner.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { LoaderIcon } from "lucide-react";
+const Spinner = ({ className, size = 4, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    LoaderIcon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn(`size-${size} animate-spin`, className),
+      ...props
+    }
+  );
+};
+const SpinnerCustom = ({ className, size = 4, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center gap-4", children: /* @__PURE__ */ jsx(Spinner, { className, size, ...props }) });
+};
+export {
+  Spinner,
+  SpinnerCustom
+};

package/ui/Spinner/index.js

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

package/ui/SpinnerSquare/SpinnerSquare.css

@@ -0,0 +1 @@
+.square-spinner::before{display:none}.square-spinner.fixed{position:fixed;top:0;right:0;bottom:0;left:0;height:100vh}.square-spinner.absolute{position:absolute;top:0;right:0;bottom:0;left:0}.square-spinner.default{width:100%;height:100%}.square-spinner__main{position:absolute;top:50%;left:52%;width:86px;height:64px;margin:0;transform:translate(-50%, -50%)}.square-spinner__square{position:relative}.square-spinner__square:nth-child(1){margin-left:0}.square-spinner__square:nth-child(1) span{animation:animSquare1 2s infinite ease-in}.square-spinner__square:nth-child(2){margin-left:22px}.square-spinner__square:nth-child(2) span{animation:animSquare2 2s infinite ease-in}.square-spinner__square:nth-child(3){margin-left:44px}.square-spinner__square:nth-child(3) span{animation:animSquare3 2s infinite ease-in}.square-spinner__square span{position:absolute;top:0;left:10px;height:16px;width:16px;border-radius:2px;background-color:#4e5060}.square-spinner__square span:nth-child(1){top:0;animation-delay:0s}.square-spinner__square span:nth-child(2){top:22px;animation-delay:.15s}.square-spinner__square span:nth-child(3){top:44px;animation-delay:.3s}@keyframes animSquare1{0%,5%,95%,100%{transform:translate(0px, 0px) rotate(0deg)}30%,70%{transform:translate(-40px, 0px) rotate(-90deg)}}@keyframes animSquare2{0%,10%,90%,100%{transform:translate(0px, 0px) rotate(0deg)}35%,65%{transform:translate(-40px, 0px) rotate(-90deg)}}@keyframes animSquare3{0%,15%,85%,100%{transform:translate(0px, 0px) rotate(0deg)}40%,60%{transform:translate(-40px, 0px) rotate(-90deg)}}@media(max-width: 550px){.square-spinner{transform:scale(0.75)}}@media(max-width: 440px){.square-spinner{transform:scale(0.5)}}

package/ui/SpinnerSquare/SpinnerSquare.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./SpinnerSquare.css";
+const SpinnerSquare = ({ variant = "default" }) => /* @__PURE__ */ jsx("div", { className: `square-spinner ${variant}`, children: /* @__PURE__ */ jsxs("div", { className: "square-spinner__main", children: [
+  /* @__PURE__ */ jsxs("div", { className: "square-spinner__square", children: [
+    /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsx("span", {})
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "square-spinner__square", children: [
+    /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsx("span", {})
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "square-spinner__square", children: [
+    /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsx("span", {})
+  ] })
+] }) });
+export {
+  SpinnerSquare
+};

package/ui/SpinnerSquare/index.js

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

package/ui/StatisticCard/StatisticCard.js

@@ -0,0 +1,27 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AreaChartWithGradient } from "../Charts/AreaChartWithGradient.js";
+const StatisticCard = ({
+  title,
+  color = "#ef4444",
+  data
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "group border-border bg-secondary relative flex flex-1 flex-col rounded-lg border shadow-md transition-all duration-200 hover:-translate-y-[2px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between gap-2 p-5 pb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-gray-chateau text-2xs font-semibold tracking-wider uppercase", children: title })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-default text-3xl font-bold", children: data?.activeCount != null ? data.activeCount : data?.totalCount ?? 0 }),
+        data?.activeCount != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-dark-gray text-xs font-bold", children: "/" }),
+          /* @__PURE__ */ jsx("span", { className: "text-dark-gray text-xs font-bold", children: data.totalCount })
+        ] })
+      ] })
+    ] }),
+    data && /* @__PURE__ */ jsx("div", { className: "-m-1 flex min-h-[60px] flex-col justify-end", children: /* @__PURE__ */ jsx(AreaChartWithGradient, { data: data.points, color, height: 60 }) })
+  ] });
+};
+export {
+  StatisticCard
+};

package/ui/StatisticCard/index.js

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