@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/cjs/components/filter/filter-modal.cjs

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+require('../buttons/back-button/back-button.cjs');
+const components_buttons_button_button = require('../buttons/button/button.cjs');
+require('../buttons/copy-button/copy-button.cjs');
+require('../buttons/external-button/external-button.cjs');
+require('../buttons/filter-button/filter-button.cjs');
+require('../buttons/navigation-button/navigation-button.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+const utils_react = require('../../utils/react.cjs');
+require('../buttons/tab-button/tab-button.cjs');
+const components_checkboxItem_checkboxItem = require('../checkbox-item/checkbox-item.cjs');
+const components_dialog_dialog = require('../dialog/dialog.cjs');
+require('../dialog/dialog-container.cjs');
+const components_dialog_dialogContent = require('../dialog/dialog-content.cjs');
+require('../dialog/dialog-description.cjs');
+const components_dialog_dialogFooter = require('../dialog/dialog-footer.cjs');
+const components_dialog_dialogHeader = require('../dialog/dialog-header.cjs');
+require('../dialog/dialog-overlay.cjs');
+const components_dialog_dialogTitle = require('../dialog/dialog-title.cjs');
+const components_searchLine_searchLine = require('../search-line/search-line.cjs');
+const components_tabs_tabs = require('../tabs/tabs.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+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__namespace.useState("");
+  const [sortedOptions, setSortedOptions] = React__namespace.useState([]);
+  const [sortedTabbedOptions, setSortedTabbedOptions] = React__namespace.useState([]);
+  const handleReset = React__namespace.useCallback(() => {
+    onReset();
+  }, [onReset]);
+  const handleApply = React__namespace.useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const filteredOptions = React__namespace.useMemo(() => {
+    if (!sortedOptions) return [];
+    if (!searchQuery.trim()) {
+      return sortedOptions;
+    }
+    const query = searchQuery.toLowerCase().trim();
+    return sortedOptions.filter((option) => {
+      const labelText = utils_react.extractTextFromLabel(option.label).toLowerCase();
+      return labelText.includes(query);
+    });
+  }, [sortedOptions, searchQuery]);
+  const filteredTabbedOptions = React__namespace.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 = utils_react.extractTextFromLabel(option.label).toLowerCase();
+        return labelText.includes(query);
+      })
+    })).filter((tab) => tab.options.length > 0);
+  }, [sortedTabbedOptions, searchQuery]);
+  const defaultActiveTab = React__namespace.useMemo(() => {
+    return filteredTabbedOptions.length > 0 ? filteredTabbedOptions[0].tab : "";
+  }, [filteredTabbedOptions]);
+  const prevModalShowRef = React__namespace.useRef(modalShow);
+  React__namespace.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__namespace.useMemo(() => {
+    if (tabbedOptions) {
+      return tabbedOptions.reduce((sum, tab) => sum + tab.options.length, 0);
+    }
+    return options?.length ?? 0;
+  }, [options, tabbedOptions]);
+  const searchState = React__namespace.useMemo(
+    () => ({
+      value: searchQuery,
+      handleInput: (ev) => {
+        setSearchQuery(ev.target.value);
+      },
+      handleSubmit: (ev) => {
+        ev.preventDefault();
+      }
+    }),
+    [searchQuery]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_dialog_dialog.Dialog,
+    {
+      open: modalShow,
+      onOpenChange: (open) => open ? onOpen() : onClose(),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(components_dialog_dialogContent.DialogContent, { className: utils_cn.cn("max-w-md", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_dialog_dialogHeader.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(components_dialog_dialogTitle.DialogTitle, { children: title }) }),
+        showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+          components_searchLine_searchLine.SearchLine,
+          {
+            searchState,
+            placeholder: "Search options...",
+            size: "full"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils_cn.cn(
+              tabbedOptions ? "" : "max-h-[60vh] overflow-y-auto",
+              optionsClassName
+            ),
+            children: tabbedOptions ? filteredTabbedOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm text-muted-foreground", children: allOptionsCount === 0 ? "No options available" : "No options match your search" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+              components_tabs_tabs.Tabs,
+              {
+                defaultValue: defaultActiveTab,
+                className: "w-full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabs.TabsList, { className: "w-full justify-start", children: filteredTabbedOptions.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabs.TabsTrigger, { value: tab.tab, children: tab.label }, tab.tab)) }),
+                  filteredTabbedOptions.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+                    components_tabs_tabs.TabsContent,
+                    {
+                      value: tab.tab,
+                      className: "mt-4 max-h-[60vh] overflow-y-auto",
+                      children: tab.options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm text-muted-foreground", children: "No options available" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: tab.options.map((option) => {
+                        const checked = isSelected(state, option.value);
+                        const key = utils_react.serializeValue(option.value);
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          components_checkboxItem_checkboxItem.CheckboxItem,
+                          {
+                            checked,
+                            onCheckedChange: (newChecked) => onSelect(option.value, newChecked),
+                            children: option.label
+                          },
+                          key
+                        );
+                      }) })
+                    },
+                    tab.tab
+                  ))
+                ]
+              },
+              defaultActiveTab
+            ) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm text-muted-foreground", children: allOptionsCount === 0 ? "No options available" : "No options match your search" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: filteredOptions.map((option) => {
+              const checked = isSelected(state, option.value);
+              const key = utils_react.serializeValue(option.value);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                components_checkboxItem_checkboxItem.CheckboxItem,
+                {
+                  checked,
+                  onCheckedChange: (newChecked) => onSelect(option.value, newChecked),
+                  children: option.label
+                },
+                key
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(components_dialog_dialogFooter.DialogFooter, { className: "flex-row justify-between gap-2 sm:justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components_buttons_button_button.Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handleReset,
+              disabled: !state || (Array.isArray(state) ? state.length === 0 : state.size === 0),
+              children: resetLabel
+            }
+          ),
+          showApplyButton ? /* @__PURE__ */ jsxRuntime.jsx(components_buttons_button_button.Button, { type: "button", onClick: handleApply, children: applyLabel }) : /* @__PURE__ */ jsxRuntime.jsx(components_buttons_button_button.Button, { type: "button", variant: "default", onClick: onClose, children: applyLabel })
+        ] })
+      ] })
+    }
+  );
+}
+
+exports.FilterModal = FilterModal;

package/dist/cjs/components/filter/filter-radio-item.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const FilterRadioItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  DropdownMenuPrimitive__namespace.RadioItem,
+  {
+    ref,
+    className: utils_cn.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__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+FilterRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
+
+exports.FilterRadioItem = FilterRadioItem;

package/dist/cjs/components/filter/filter-separator.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const FilterSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: utils_cn.cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+FilterSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
+
+exports.FilterSeparator = FilterSeparator;

package/dist/cjs/components/filter/index.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_filter_filterBlock = require('./filter-block.cjs');
+const components_filter_filterCheckboxItem = require('./filter-checkbox-item.cjs');
+const components_filter_filterChip = require('./filter-chip.cjs');
+const components_filter_filterChips = require('./filter-chips.cjs');
+const components_filter_filterDropdownItem = require('./filter-dropdown-item.cjs');
+const components_filter_filterGroup = require('./filter-group.cjs');
+const components_filter_filterLabel = require('./filter-label.cjs');
+const components_filter_filterModal = require('./filter-modal.cjs');
+const components_filter_filterModalItem = require('./filter-modal-item.cjs');
+const components_filter_filterRadioItem = require('./filter-radio-item.cjs');
+const components_filter_filterSeparator = require('./filter-separator.cjs');
+const components_filter_variants = require('./variants.cjs');
+
+
+
+exports.FilterBlock = components_filter_filterBlock.FilterBlock;
+exports.FilterCheckboxItem = components_filter_filterCheckboxItem.FilterCheckboxItem;
+exports.FilterChip = components_filter_filterChip.FilterChip;
+exports.FilterChips = components_filter_filterChips.FilterChips;
+exports.FilterDropdownItem = components_filter_filterDropdownItem.FilterDropdownItem;
+exports.FilterGroup = components_filter_filterGroup.FilterGroup;
+exports.FilterLabel = components_filter_filterLabel.FilterLabel;
+exports.FilterModal = components_filter_filterModal.FilterModal;
+exports.FilterModalItem = components_filter_filterModalItem.FilterModalItem;
+exports.FilterRadioItem = components_filter_filterRadioItem.FilterRadioItem;
+exports.FilterSeparator = components_filter_filterSeparator.FilterSeparator;
+exports.filterBlockVariants = components_filter_variants.filterBlockVariants;

package/dist/cjs/components/filter/interface.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/components/filter/variants.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const classVarianceAuthority = require('class-variance-authority');
+
+const filterBlockVariants = classVarianceAuthority.cva("w-full", {
+  variants: {
+    variant: {
+      default: "",
+      elevated: "shadow-lg",
+      outlined: "border-2",
+      ghost: "border-0 shadow-none"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+exports.filterBlockVariants = filterBlockVariants;

package/dist/cjs/components/form/form-field.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_input_input = require('../input/input.cjs');
+const components_label_label = require('../label/label.cjs');
+const utils_a11y = require('../../utils/a11y.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+
+function FormField({
+  label,
+  error,
+  required,
+  helperText,
+  inputProps,
+  className
+}) {
+  const { inputId, errorId, helperId } = utils_a11y.useFormFieldIds();
+  const hasError = !!error;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_label_label.Label,
+      {
+        htmlFor: inputId,
+        required,
+        variant: hasError ? "error" : "default",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_input_input.Input,
+      {
+        ...inputProps,
+        id: inputId,
+        hasError,
+        errorMessage: error,
+        "aria-invalid": hasError,
+        "aria-describedby": hasError ? errorId : helperText ? helperId : void 0,
+        "aria-required": required
+      }
+    ),
+    !hasError && helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText })
+  ] });
+}
+
+exports.FormField = FormField;

package/dist/cjs/components/form/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_form_formField = require('./form-field.cjs');
+
+
+
+exports.FormField = components_form_formField.FormField;

package/dist/cjs/components/graph/default-config.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const utils_colors = require('../../utils/colors.cjs');
+
+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() {
+  const foregroundColor = utils_colors.resolveCSSColor(
+    "hsl(var(--foreground))",
+    "rgb(0, 0, 0)"
+  );
+  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,
+      textColor: foregroundColor
+    },
+    layout: {
+      background: {
+        color: "transparent"
+      },
+      textColor: foregroundColor,
+      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 = utils_colors.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
+    }
+  }
+};
+
+exports.DEFAULT_AREA_SERIES = DEFAULT_AREA_SERIES;
+exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;
+exports.DEFAULT_VERTICAL_LINE = DEFAULT_VERTICAL_LINE;
+exports.getDefaultOptions = getDefaultOptions;
+exports.getDefaultSeries = getDefaultSeries;
+exports.getDefaultVerticalLine = getDefaultVerticalLine;