@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/esm/components/filter/filter-modal.js

@@ -0,0 +1,214 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cn, { extractTextFromLabel, serializeValue } from "../../utils/index.js";
+import { Button } from "../buttons/index.js";
+import { CheckboxItem } from "../checkbox-item.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../dialog/index.js";
+import { SearchLine } from "../search-line.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs.js";
+function isSelected(state, value) {
+  if (!state) return false;
+  if (Array.isArray(state)) {
+    return state.includes(value);
+  }
+  return state.has(value);
+}
+function FilterModal({
+  title,
+  state,
+  modalShow,
+  onOpen,
+  onClose,
+  onReset,
+  options,
+  tabbedOptions,
+  onSelect,
+  className,
+  optionsClassName,
+  resetLabel = "Reset",
+  applyLabel = "Apply",
+  showApplyButton = false,
+  showSearch = false
+}) {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [sortedOptions, setSortedOptions] = React.useState([]);
+  const [sortedTabbedOptions, setSortedTabbedOptions] = React.useState([]);
+  const handleReset = React.useCallback(() => {
+    onReset();
+  }, [onReset]);
+  const handleApply = React.useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const filteredOptions = React.useMemo(() => {
+    if (!sortedOptions) return [];
+    if (!searchQuery.trim()) {
+      return sortedOptions;
+    }
+    const query = searchQuery.toLowerCase().trim();
+    return sortedOptions.filter((option) => {
+      const labelText = extractTextFromLabel(option.label).toLowerCase();
+      return labelText.includes(query);
+    });
+  }, [sortedOptions, searchQuery]);
+  const filteredTabbedOptions = React.useMemo(() => {
+    if (!sortedTabbedOptions) return [];
+    if (!searchQuery.trim()) {
+      return sortedTabbedOptions;
+    }
+    const query = searchQuery.toLowerCase().trim();
+    return sortedTabbedOptions.map((tab) => ({
+      ...tab,
+      options: tab.options.filter((option) => {
+        const labelText = extractTextFromLabel(option.label).toLowerCase();
+        return labelText.includes(query);
+      })
+    })).filter((tab) => tab.options.length > 0);
+  }, [sortedTabbedOptions, searchQuery]);
+  const defaultActiveTab = React.useMemo(() => {
+    return filteredTabbedOptions.length > 0 ? filteredTabbedOptions[0].tab : "";
+  }, [filteredTabbedOptions]);
+  const prevModalShowRef = React.useRef(modalShow);
+  React.useEffect(() => {
+    const wasOpen = prevModalShowRef.current;
+    const isOpen = modalShow;
+    if (!wasOpen && isOpen) {
+      if (options) {
+        const sorted = [...options].sort((a, b) => {
+          const aSelected = isSelected(state, a.value);
+          const bSelected = isSelected(state, b.value);
+          if (aSelected && !bSelected) return -1;
+          if (!aSelected && bSelected) return 1;
+          return 0;
+        });
+        setSortedOptions(sorted);
+      }
+      if (tabbedOptions) {
+        const sorted = tabbedOptions.map((tab) => ({
+          ...tab,
+          options: [...tab.options].sort((a, b) => {
+            const aSelected = isSelected(state, a.value);
+            const bSelected = isSelected(state, b.value);
+            if (aSelected && !bSelected) return -1;
+            if (!aSelected && bSelected) return 1;
+            return 0;
+          })
+        }));
+        setSortedTabbedOptions(sorted);
+      }
+    } else if (wasOpen && !isOpen) {
+      setSearchQuery("");
+    }
+    prevModalShowRef.current = modalShow;
+  }, [modalShow, state, options, tabbedOptions]);
+  const allOptionsCount = React.useMemo(() => {
+    if (tabbedOptions) {
+      return tabbedOptions.reduce((sum, tab) => sum + tab.options.length, 0);
+    }
+    return options?.length ?? 0;
+  }, [options, tabbedOptions]);
+  const searchState = React.useMemo(
+    () => ({
+      value: searchQuery,
+      handleInput: (ev) => {
+        setSearchQuery(ev.target.value);
+      },
+      handleSubmit: (ev) => {
+        ev.preventDefault();
+      }
+    }),
+    [searchQuery]
+  );
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: modalShow,
+      onOpenChange: (open) => open ? onOpen() : onClose(),
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: cn("max-w-md", className), children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
+        showSearch && /* @__PURE__ */ jsx(
+          SearchLine,
+          {
+            searchState,
+            placeholder: "Search options...",
+            size: "full"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              tabbedOptions ? "" : "max-h-[60vh] overflow-y-auto",
+              optionsClassName
+            ),
+            children: tabbedOptions ? filteredTabbedOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-muted-foreground", children: allOptionsCount === 0 ? "No options available" : "No options match your search" }) : /* @__PURE__ */ jsxs(
+              Tabs,
+              {
+                defaultValue: defaultActiveTab,
+                className: "w-full",
+                children: [
+                  /* @__PURE__ */ jsx(TabsList, { className: "w-full justify-start", children: filteredTabbedOptions.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.tab, children: tab.label }, tab.tab)) }),
+                  filteredTabbedOptions.map((tab) => /* @__PURE__ */ jsx(
+                    TabsContent,
+                    {
+                      value: tab.tab,
+                      className: "mt-4 max-h-[60vh] overflow-y-auto",
+                      children: tab.options.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-muted-foreground", children: "No options available" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: tab.options.map((option) => {
+                        const checked = isSelected(state, option.value);
+                        const key = serializeValue(option.value);
+                        return /* @__PURE__ */ jsx(
+                          CheckboxItem,
+                          {
+                            checked,
+                            onCheckedChange: (newChecked) => onSelect(option.value, newChecked),
+                            children: option.label
+                          },
+                          key
+                        );
+                      }) })
+                    },
+                    tab.tab
+                  ))
+                ]
+              },
+              defaultActiveTab
+            ) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-muted-foreground", children: allOptionsCount === 0 ? "No options available" : "No options match your search" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredOptions.map((option) => {
+              const checked = isSelected(state, option.value);
+              const key = serializeValue(option.value);
+              return /* @__PURE__ */ jsx(
+                CheckboxItem,
+                {
+                  checked,
+                  onCheckedChange: (newChecked) => onSelect(option.value, newChecked),
+                  children: option.label
+                },
+                key
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row justify-between gap-2 sm:justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handleReset,
+              disabled: !state || (Array.isArray(state) ? state.length === 0 : state.size === 0),
+              children: resetLabel
+            }
+          ),
+          showApplyButton ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleApply, children: applyLabel }) : /* @__PURE__ */ jsx(Button, { type: "button", variant: "default", onClick: onClose, children: applyLabel })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  FilterModal
+};

package/dist/esm/components/filter/filter-radio-item.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Circle } from "lucide-react";
+import * as React from "react";
+import cn from "../../utils/index.js";
+const FilterRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+FilterRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+export {
+  FilterRadioItem
+};

package/dist/esm/components/filter/filter-separator.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import cn from "../../utils/index.js";
+const FilterSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+FilterSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+export {
+  FilterSeparator
+};

package/dist/esm/components/filter/index.js

@@ -0,0 +1,12 @@
+export * from "./filter-block.js";
+export * from "./filter-checkbox-item.js";
+export * from "./filter-chip.js";
+export * from "./filter-chips.js";
+export * from "./filter-dropdown-item.js";
+export * from "./filter-group.js";
+export * from "./filter-label.js";
+export * from "./filter-modal.js";
+export * from "./filter-modal-item.js";
+export * from "./filter-radio-item.js";
+export * from "./filter-separator.js";
+export * from "./variants.js";

package/dist/esm/components/filter/variants.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+const filterBlockVariants = cva("w-full", {
+  variants: {
+    variant: {
+      default: "",
+      elevated: "shadow-lg",
+      outlined: "border-2",
+      ghost: "border-0 shadow-none"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  filterBlockVariants
+};

package/dist/esm/components/form/form-field.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormFieldIds } from "../../utils/a11y.js";
+import { cn } from "../../utils/cn.js";
+import { Input } from "../input.js";
+import { Label } from "../label.js";
+function FormField({
+  label,
+  error,
+  required,
+  helperText,
+  inputProps,
+  className
+}) {
+  const { inputId, errorId, helperId } = useFormFieldIds(label);
+  const hasError = !!error;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: inputId,
+        required,
+        variant: hasError ? "error" : "default",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...inputProps,
+        id: inputId,
+        hasError,
+        errorMessage: error,
+        "aria-invalid": hasError,
+        "aria-describedby": hasError ? errorId : helperText ? helperId : void 0,
+        "aria-required": required
+      }
+    ),
+    !hasError && helperText && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText })
+  ] });
+}
+export {
+  FormField
+};

package/dist/esm/components/form/index.js

@@ -0,0 +1 @@
+export * from "./form-field.js";

package/dist/esm/components/graph/default-config.js

@@ -0,0 +1,129 @@
+import { resolveCSSColor } from "../../utils/colors.js";
+const DEFAULT_AREA_SERIES = {
+  topColor: "rgba(76, 175, 80, 0.56)",
+  bottomColor: "rgba(76, 175, 80, 0.04)",
+  lineColor: "#02c39a",
+  lineWidth: 2
+};
+const DEFAULT_VERTICAL_LINE = {
+  showLabel: true,
+  color: "#02c39a",
+  labelBackgroundColor: "#02c39a",
+  width: 2
+};
+function getDefaultOptions() {
+  return {
+    timeScale: {
+      borderVisible: true,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      visible: true
+    },
+    rightPriceScale: {
+      autoScale: true,
+      alignLabels: true,
+      borderVisible: true,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      entireTextOnly: false
+    },
+    layout: {
+      background: {
+        color: "transparent"
+      },
+      textColor: resolveCSSColor("hsl(var(--foreground))", "rgb(0, 0, 0)"),
+      fontSize: 14
+    },
+    crosshair: {
+      horzLine: {
+        width: 2,
+        color: "rgba(224, 227, 235, 0.1)",
+        style: 0,
+        labelVisible: false
+      },
+      vertLine: {
+        width: 2,
+        color: "rgba(224, 227, 235, 0.1)",
+        style: 0,
+        labelVisible: false
+      }
+    },
+    grid: {
+      vertLines: {
+        visible: false
+      },
+      horzLines: {
+        visible: false
+      }
+    }
+  };
+}
+function getDefaultSeries() {
+  return {
+    topColor: "rgba(76, 175, 80, 0.56)",
+    bottomColor: "rgba(76, 175, 80, 0.04)",
+    lineColor: DEFAULT_AREA_SERIES.lineColor,
+    lineWidth: 2
+  };
+}
+function getDefaultVerticalLine() {
+  const primaryColor = resolveCSSColor(
+    "hsl(var(--primary))",
+    "rgb(76, 175, 80)"
+  );
+  return {
+    showLabel: true,
+    color: primaryColor,
+    labelBackgroundColor: primaryColor,
+    width: 2
+  };
+}
+const DEFAULT_OPTIONS = {
+  timeScale: {
+    borderVisible: true,
+    borderColor: "rgba(224, 227, 235, 0.1)",
+    visible: true
+  },
+  rightPriceScale: {
+    autoScale: true,
+    alignLabels: true,
+    borderVisible: true,
+    borderColor: "rgba(224, 227, 235, 0.1)",
+    entireTextOnly: false
+  },
+  layout: {
+    background: {
+      color: "transparent"
+    },
+    textColor: "rgb(0, 0, 0)",
+    fontSize: 14
+  },
+  crosshair: {
+    horzLine: {
+      width: 2,
+      color: "rgba(224, 227, 235, 0.1)",
+      style: 0,
+      labelVisible: false
+    },
+    vertLine: {
+      width: 2,
+      color: "rgba(224, 227, 235, 0.1)",
+      style: 0,
+      labelVisible: false
+    }
+  },
+  grid: {
+    vertLines: {
+      visible: false
+    },
+    horzLines: {
+      visible: false
+    }
+  }
+};
+export {
+  DEFAULT_AREA_SERIES,
+  DEFAULT_OPTIONS,
+  DEFAULT_VERTICAL_LINE,
+  getDefaultOptions,
+  getDefaultSeries,
+  getDefaultVerticalLine
+};

package/dist/esm/components/graph/formatters.js

@@ -0,0 +1,150 @@
+import { DateTime } from "luxon";
+const MAX_EXPONENTIAL_MONEY_THRESHOLD = 1e11;
+const EPSILON = 1e-10;
+const MIN_DISPLAY_THRESHOLD = 1e-4;
+function formatMoneyAmount({
+  amount,
+  maxExponentialThreshold,
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 0,
+  format = "full"
+}) {
+  const absAmount = Math.abs(amount);
+  if (format === "short") {
+    if (absAmount >= 1e9) {
+      return `${(amount / 1e9).toFixed(maximumFractionDigits)}B`;
+    }
+    if (absAmount >= 1e6) {
+      return `${(amount / 1e6).toFixed(maximumFractionDigits)}M`;
+    }
+    if (absAmount >= 1e3) {
+      return `${(amount / 1e3).toFixed(maximumFractionDigits)}K`;
+    }
+  }
+  if (maxExponentialThreshold && absAmount > maxExponentialThreshold && absAmount > 0) {
+    return amount.toExponential(2);
+  }
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits,
+    maximumFractionDigits
+  }).format(amount);
+}
+function toSignificant(value, decimals) {
+  const divisor = 10n ** BigInt(decimals);
+  const result = Number(value) / Number(divisor);
+  return result.toFixed(decimals).replace(/\.?0+$/, "");
+}
+const formatGraphMoney = (value, symbol, format = "full") => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return symbol ? `<${MIN_DISPLAY_THRESHOLD}${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return symbol ? `0${symbol}` : "0";
+  }
+  const f = formatMoneyAmount({
+    amount: value,
+    maxExponentialThreshold: MAX_EXPONENTIAL_MONEY_THRESHOLD,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    format
+  });
+  if (symbol) return `${f}${symbol}`;
+  return f;
+};
+const PERCENT_DECIMALS = 2;
+const formatGraphPercent = (value, symbol) => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return symbol ? `<${MIN_DISPLAY_THRESHOLD}${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return symbol ? `0${symbol}` : "0";
+  }
+  const f = toSignificant(
+    BigInt(Math.floor(value * 10 ** PERCENT_DECIMALS)),
+    PERCENT_DECIMALS
+  );
+  if (symbol) return `${f}${symbol}`;
+  return f;
+};
+const DEFAULT_DECIMALS = 4;
+const defaultFormatter = (value) => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return "0";
+  }
+  const f = toSignificant(
+    BigInt(Math.floor(value * 10 ** DEFAULT_DECIMALS)),
+    DEFAULT_DECIMALS
+  );
+  return f;
+};
+const formatGraphToken = (value, symbol) => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return symbol ? `<${MIN_DISPLAY_THRESHOLD} ${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return symbol ? `0 ${symbol}` : "0";
+  }
+  const isWholeNumber = Number.isInteger(value);
+  const amountAbs = Math.abs(value);
+  const shouldUseShortFormat = isWholeNumber && amountAbs >= 1e3;
+  const f = formatMoneyAmount({
+    amount: value,
+    maxExponentialThreshold: MAX_EXPONENTIAL_MONEY_THRESHOLD,
+    minimumFractionDigits: isWholeNumber ? 0 : 2,
+    maximumFractionDigits: shouldUseShortFormat ? 1 : isWholeNumber ? 0 : 2,
+    format: shouldUseShortFormat ? "short" : "full"
+  });
+  if (symbol) return `${f} ${symbol}`;
+  return f;
+};
+const Y_FORMATTERS = {
+  "%": formatGraphPercent,
+  $: formatGraphMoney,
+  token: formatGraphToken,
+  none: defaultFormatter
+};
+const getYFormatter = (unit) => Y_FORMATTERS[unit] || Y_FORMATTERS.token;
+const formatXTime = (time) => DateTime.fromSeconds(Number(time)).toFormat("dd/LL/yyyy HH:mm");
+const formatXTimeOnly = (time) => DateTime.fromSeconds(Number(time)).toFormat("HH:mm");
+const createMultiDayFormatter = () => {
+  let lastShownDay = null;
+  return (time) => {
+    const dateTime = DateTime.fromSeconds(Number(time));
+    const currentDay = dateTime.toFormat("yyyy-MM-dd");
+    if (currentDay !== lastShownDay) {
+      lastShownDay = currentDay;
+      return dateTime.toFormat("dd MMM");
+    }
+    return dateTime.toFormat("HH:mm");
+  };
+};
+const formatXPercent = (time, symbol) => formatGraphPercent(Number(time), symbol);
+const X_FORMATTERS = {
+  time: formatXTime,
+  "%": formatXPercent
+};
+const getXFormatter = (unit, points) => {
+  if (unit === "time" && points && points.length > 0) {
+    const firstDate = DateTime.fromSeconds(Number(points[0].time));
+    const lastDate = DateTime.fromSeconds(
+      Number(points[points.length - 1].time)
+    );
+    const isSameDay = firstDate.hasSame(lastDate, "day");
+    if (isSameDay) {
+      return formatXTimeOnly;
+    }
+    return createMultiDayFormatter();
+  }
+  return X_FORMATTERS[unit] || X_FORMATTERS.time;
+};
+export {
+  getXFormatter,
+  getYFormatter
+};

package/dist/esm/components/graph/graph-current-value.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { getXFormatter, getYFormatter } from "./formatters.js";
+function GraphCurrentValue({
+  point,
+  xMeasureUnit,
+  yMeasureUnit,
+  className
+}) {
+  const xFormatter = getXFormatter(xMeasureUnit);
+  const yFormatter = getYFormatter(yMeasureUnit);
+  const xFormatted = xFormatter(point.time, xMeasureUnit);
+  const yFormatted = yFormatter(point.value, yMeasureUnit);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute top-2 left-2 right-2 z-[100] pointer-events-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: yFormatted }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground whitespace-nowrap overflow-hidden text-ellipsis mt-0.5", children: xFormatted })
+      ]
+    }
+  );
+}
+export {
+  GraphCurrentValue
+};