@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

package/dist/types/components/filter/filter-chips.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * FilterChips component - container for displaying multiple filter chips
+ */
+export interface FilterChipsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of active filters to display as chips
+     */
+    filters?: Array<{
+        id: string;
+        label: string;
+        value?: string;
+    }>;
+    /**
+     * Callback when a filter chip is removed
+     */
+    onRemoveFilter?: (id: string) => void;
+    /**
+     * Callback to clear all filters
+     */
+    onClearAll?: () => void;
+    /**
+     * Whether to show the "Clear all" button
+     */
+    showClearAll?: boolean;
+}
+/**
+ * FilterChips component for displaying multiple active filters as chips
+ *
+ * @example
+ * ```tsx
+ * <FilterChips
+ *   filters={[
+ *     { id: "status", label: "Status: Active" },
+ *     { id: "type", label: "Type: Credit" },
+ *   ]}
+ *   onRemoveFilter={(id) => removeFilter(id)}
+ *   onClearAll={() => clearAllFilters()}
+ * />
+ * ```
+ */
+export declare const FilterChips: React.ForwardRefExoticComponent<FilterChipsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-dropdown-item.d.ts

@@ -0,0 +1,24 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterDropdownItem component - a dropdown menu item for filters
+ */
+export interface FilterDropdownItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    inset?: boolean;
+}
+/**
+ * FilterDropdownItem component for displaying filter options in a dropdown menu
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterDropdownItem onClick={() => handleFilter("all")}>
+ *     All Items
+ *   </FilterDropdownItem>
+ *   <FilterDropdownItem onClick={() => handleFilter("active")}>
+ *     Active Items
+ *   </FilterDropdownItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterDropdownItem: React.ForwardRefExoticComponent<FilterDropdownItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-group.d.ts

@@ -0,0 +1,22 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterGroup component - a group container for filters
+ */
+export interface FilterGroupProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> {
+}
+/**
+ * FilterGroup component for grouping related filter items
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterGroup>
+ *     <FilterLabel>Status</FilterLabel>
+ *     <FilterCheckboxItem>Active</FilterCheckboxItem>
+ *     <FilterCheckboxItem>Inactive</FilterCheckboxItem>
+ *   </FilterGroup>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterGroup: React.ForwardRefExoticComponent<FilterGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-label.d.ts

@@ -0,0 +1,21 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterLabel component - a label for filter groups
+ */
+export interface FilterLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    inset?: boolean;
+}
+/**
+ * FilterLabel component for labeling filter groups
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterLabel>Status</FilterLabel>
+ *   <FilterCheckboxItem>Active</FilterCheckboxItem>
+ *   <FilterCheckboxItem>Inactive</FilterCheckboxItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterLabel: React.ForwardRefExoticComponent<FilterLabelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-modal-item.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * FilterModalItem component - a content item for filter modals
+ */
+export interface FilterModalItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the item is active/selected
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * FilterModalItem component for displaying filter options in a modal dialog
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <DialogTitle>Filter Options</DialogTitle>
+ *   <FilterModalItem active={isActive} onClick={() => handleFilter("option1")}>
+ *     Option 1
+ *   </FilterModalItem>
+ *   <FilterModalItem onClick={() => handleFilter("option2")}>
+ *     Option 2
+ *   </FilterModalItem>
+ * </DialogContent>
+ * ```
+ */
+export declare const FilterModalItem: React.ForwardRefExoticComponent<FilterModalItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-modal.d.ts

@@ -0,0 +1,123 @@
+import * as React from "react";
+import type { SelectFilterList } from "./interface";
+/**
+ * FilterModal component - a wrapper for filter modals using permissionless-ui Dialog
+ *
+ * This component provides a complete modal interface for selecting multiple filter options
+ * with checkbox-like behavior. It manages the modal state and provides callbacks for
+ * filter selection and reset.
+ *
+ * @example
+ * ```tsx
+ * function MyFilter() {
+ *   const [selectedFilters, setSelectedFilters] = React.useState<Set<string> | null>(null);
+ *   const [modalOpen, setModalOpen] = React.useState(false);
+ *
+ *   const options = [
+ *     { value: "active", label: "Active" },
+ *     { value: "inactive", label: "Inactive" },
+ *     { value: "pending", label: "Pending" },
+ *   ];
+ *
+ *   return (
+ *     <FilterModal
+ *       title="Filter by Status"
+ *       state={selectedFilters}
+ *       modalShow={modalOpen}
+ *       onOpen={() => setModalOpen(true)}
+ *       onClose={() => setModalOpen(false)}
+ *       onReset={() => setSelectedFilters(null)}
+ *       options={options}
+ *       onSelect={(value, checked) => {
+ *         const newSet = selectedFilters ? new Set(selectedFilters) : new Set();
+ *         if (checked) {
+ *           newSet.add(value);
+ *         } else {
+ *           newSet.delete(value);
+ *         }
+ *         setSelectedFilters(newSet.size > 0 ? newSet : null);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export interface FilterModalProps<T> {
+    /**
+     * Title of the modal dialog
+     */
+    title: React.ReactNode;
+    /**
+     * Current state of selected filters
+     * Can be a Set<T> or T[] array, or null if nothing is selected
+     */
+    state: SelectFilterList<T> | null;
+    /**
+     * Whether the modal is currently visible
+     */
+    modalShow: boolean;
+    /**
+     * Callback to open the modal
+     */
+    onOpen: () => void;
+    /**
+     * Callback to close the modal
+     */
+    onClose: () => void;
+    /**
+     * Callback to reset all filters
+     */
+    onReset: () => void;
+    /**
+     * Array of filter options to display
+     * If tabbedOptions is provided, this prop is ignored
+     */
+    options?: Array<{
+        value: T;
+        label: React.ReactNode;
+    }>;
+    /**
+     * Array of filter options grouped by tabs
+     * If provided, options will be displayed in tabs
+     */
+    tabbedOptions?: Array<{
+        tab: string;
+        label: React.ReactNode;
+        options: Array<{
+            value: T;
+            label: React.ReactNode;
+        }>;
+    }>;
+    /**
+     * Callback when an option is selected/deselected
+     * @param value - The value of the option
+     * @param checked - Whether the option is now checked
+     */
+    onSelect: (value: T, checked: boolean) => void;
+    /**
+     * Optional className for the dialog content
+     */
+    className?: string;
+    /**
+     * Optional className for the options container
+     */
+    optionsClassName?: string;
+    /**
+     * Optional reset button label (defaults to "Reset")
+     */
+    resetLabel?: React.ReactNode;
+    /**
+     * Optional apply button label (defaults to "Apply")
+     */
+    applyLabel?: React.ReactNode;
+    /**
+     * Whether to show an Apply button that closes the modal
+     * If false, selections are applied immediately
+     */
+    showApplyButton?: boolean;
+    /**
+     * Whether to show a search input
+     */
+    showSearch?: boolean;
+}
+export declare function FilterModal<T>({ title, state, modalShow, onOpen, onClose, onReset, options, tabbedOptions, onSelect, className, optionsClassName, resetLabel, applyLabel, showApplyButton, showSearch, }: FilterModalProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/filter/filter-radio-item.d.ts

@@ -0,0 +1,19 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterRadioItem component - a radio item for filters in dropdown menus
+ */
+export interface FilterRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+}
+/**
+ * FilterRadioItem component for displaying filter options with radio buttons
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
+ *   <FilterRadioItem value="option1">Option 1</FilterRadioItem>
+ *   <FilterRadioItem value="option2">Option 2</FilterRadioItem>
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+export declare const FilterRadioItem: React.ForwardRefExoticComponent<FilterRadioItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-separator.d.ts

@@ -0,0 +1,22 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterSeparator component - a separator for filter groups
+ */
+export interface FilterSeparatorProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
+}
+/**
+ * FilterSeparator component for separating filter groups
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterLabel>Status</FilterLabel>
+ *   <FilterCheckboxItem>Active</FilterCheckboxItem>
+ *   <FilterSeparator />
+ *   <FilterLabel>Type</FilterLabel>
+ *   <FilterCheckboxItem>Type 1</FilterCheckboxItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterSeparator: React.ForwardRefExoticComponent<FilterSeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/index.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Filter Components
+ *
+ * A comprehensive set of filter components for building complex filter interfaces.
+ * These components work together with DropdownMenu components from dropdown-menu
+ * to create filter dropdowns similar to CreditSessionsListFilter.
+ *
+ * @example Building a complex filter dropdown:
+ * ```tsx
+ * import {
+ *   DropdownMenu,
+ *   DropdownMenuContent,
+ *   DropdownMenuTrigger,
+ *   DropdownMenuRadioGroup,
+ * } from "../dropdown-menu";
+ * import {
+ *   FilterButton,
+ * } from "../buttons/filter-button";
+ * import {
+ *   FilterLabel,
+ *   FilterSeparator,
+ *   FilterCheckboxItem,
+ *   FilterRadioItem,
+ *   FilterGroup,
+ *   FilterChips,
+ * } from "./filter";
+ *
+ * function CreditSessionsListFilter() {
+ *   const [status, setStatus] = React.useState<string[]>([]);
+ *   const [type, setType] = React.useState<string>("all");
+ *
+ *   const activeFilters = [
+ *     ...(status.length > 0 ? status.map(s => ({ id: `status-${s}`, label: `Status: ${s}` })) : []),
+ *     ...(type !== "all" ? [{ id: "type", label: `Type: ${type}` }] : []),
+ *   ];
+ *
+ *   return (
+ *     <>
+ *       <DropdownMenu>
+ *         <DropdownMenuTrigger asChild>
+ *           <FilterButton />
+ *         </DropdownMenuTrigger>
+ *         <DropdownMenuContent>
+ *           <FilterGroup>
+ *             <FilterLabel>Status</FilterLabel>
+ *             <FilterCheckboxItem
+ *               checked={status.includes("active")}
+ *               onCheckedChange={(checked) =>
+ *                 setStatus(checked
+ *                   ? [...status, "active"]
+ *                   : status.filter(s => s !== "active"))
+ *               }
+ *             >
+ *               Active
+ *             </FilterCheckboxItem>
+ *             <FilterCheckboxItem
+ *               checked={status.includes("inactive")}
+ *               onCheckedChange={(checked) =>
+ *                 setStatus(checked
+ *                   ? [...status, "inactive"]
+ *                   : status.filter(s => s !== "inactive"))
+ *               }
+ *             >
+ *               Inactive
+ *             </FilterCheckboxItem>
+ *           </FilterGroup>
+ *           <FilterSeparator />
+ *           <FilterGroup>
+ *             <FilterLabel>Type</FilterLabel>
+ *             <DropdownMenuRadioGroup value={type} onValueChange={setType}>
+ *               <FilterRadioItem value="all">All</FilterRadioItem>
+ *               <FilterRadioItem value="credit">Credit</FilterRadioItem>
+ *               <FilterRadioItem value="debit">Debit</FilterRadioItem>
+ *             </DropdownMenuRadioGroup>
+ *           </FilterGroup>
+ *         </DropdownMenuContent>
+ *       </DropdownMenu>
+ *       <FilterChips
+ *         filters={activeFilters}
+ *         onRemoveFilter={(id) => {
+ *           if (id.startsWith("status-")) {
+ *             setStatus(status.filter(s => `status-${s}` !== id));
+ *           } else if (id === "type") {
+ *             setType("all");
+ *           }
+ *         }}
+ *         onClearAll={() => {
+ *           setStatus([]);
+ *           setType("all");
+ *         }}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export * from "./filter-block";
+export * from "./filter-checkbox-item";
+export * from "./filter-chip";
+export * from "./filter-chips";
+export * from "./filter-dropdown-item";
+export * from "./filter-group";
+export * from "./filter-label";
+export * from "./filter-modal";
+export * from "./filter-modal-item";
+export * from "./filter-radio-item";
+export * from "./filter-separator";
+export type { FilterModalSelectList } from "./interface";
+export * from "./variants";

package/dist/types/components/filter/interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Type representing a list of selected filter values for FilterModal component
+ * Can be a Set or Array of values
+ */
+export type FilterModalSelectList<T> = Set<T> | T[];
+/**
+ * @deprecated Use FilterModalSelectList instead
+ * This type is kept for backward compatibility
+ */
+export type SelectFilterList<T> = FilterModalSelectList<T>;
+/**
+ * Type representing a filter range with from and to values
+ * Used for range-based filtering (e.g., date ranges, number ranges)
+ */
+export type FilterRange<T = number> = {
+    /**
+     * The starting value of the range
+     */
+    from: T;
+    /**
+     * The ending value of the range
+     */
+    to: T;
+};

package/dist/types/components/filter/variants.d.ts

@@ -0,0 +1,3 @@
+export declare const filterBlockVariants: (props?: ({
+    variant?: "default" | "ghost" | "elevated" | "outlined" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/form/form-field.d.ts

@@ -0,0 +1,38 @@
+import type * as React from "react";
+import { Input } from "../input";
+interface FormFieldProps {
+    label: string;
+    error?: string;
+    required?: boolean;
+    helperText?: string;
+    inputProps?: React.ComponentProps<typeof Input>;
+    className?: string;
+}
+/**
+ * FormField component - Composition of Label and Input with error handling
+ *
+ * Automatically manages ARIA attributes for accessibility
+ *
+ * @example
+ * ```tsx
+ * <FormField
+ *   label="Email"
+ *   required
+ *   inputProps={{ type: "email", placeholder: "Enter your email" }}
+ * />
+ *
+ * <FormField
+ *   label="Username"
+ *   error="Username is already taken"
+ *   inputProps={{ value: username, onChange: handleChange }}
+ * />
+ *
+ * <FormField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   inputProps={{ type: "password" }}
+ * />
+ * ```
+ */
+export declare function FormField({ label, error, required, helperText, inputProps, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/form/index.d.ts

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

package/dist/types/components/graph/default-config.d.ts

@@ -0,0 +1,20 @@
+import type { AreaSeriesPartialOptions, ChartOptions, DeepPartial } from "lightweight-charts";
+import type { VertLineOptions } from "./plugins/vertical-line";
+export declare const DEFAULT_AREA_SERIES: AreaSeriesPartialOptions;
+export declare const DEFAULT_VERTICAL_LINE: Partial<VertLineOptions>;
+/**
+ * Gets the default chart options with resolved CSS colors
+ * Call this at runtime to ensure CSS variables are properly resolved
+ */
+export declare function getDefaultOptions(): DeepPartial<ChartOptions>;
+/**
+ * Gets the default series options with resolved CSS colors
+ * Call this at runtime to ensure CSS variables are properly resolved
+ */
+export declare function getDefaultSeries(): AreaSeriesPartialOptions;
+/**
+ * Gets the default vertical line options with resolved CSS colors
+ * Call this at runtime to ensure CSS variables are properly resolved
+ */
+export declare function getDefaultVerticalLine(): Partial<VertLineOptions>;
+export declare const DEFAULT_OPTIONS: DeepPartial<ChartOptions>;

package/dist/types/components/graph/formatters.d.ts

@@ -0,0 +1,16 @@
+import type { Time } from "lightweight-charts";
+export interface Point {
+    time: Time;
+    value: number;
+}
+interface Flavoring<FlavorT> {
+    _type?: FlavorT;
+}
+type Flavor<T, FlavorT> = T & Flavoring<FlavorT>;
+export type YMeasureUnits = "$" | "%" | "none" | Flavor<string, "token">;
+type YFormatter = (v: number, symbol: YMeasureUnits | undefined, format?: "full" | "short") => string;
+export declare const getYFormatter: (unit: YMeasureUnits) => YFormatter;
+export type XMeasureUnits = "time" | "%";
+type XFormatter = (time: Time, symbol: XMeasureUnits | undefined) => string;
+export declare const getXFormatter: (unit: XMeasureUnits, points?: Point[]) => XFormatter;
+export {};

package/dist/types/components/graph/graph-current-value.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import type { Point, XMeasureUnits, YMeasureUnits } from "./formatters";
+export interface GraphCurrentValueProps {
+    point: Point;
+    xMeasureUnit: XMeasureUnits;
+    yMeasureUnit: YMeasureUnits;
+    className?: string;
+}
+/**
+ * GraphCurrentValue component displays the current value in single mode
+ * without background, border, or legend - just date and value
+ */
+export declare function GraphCurrentValue({ point, xMeasureUnit, yMeasureUnit, className, }: GraphCurrentValueProps): React.ReactElement;

package/dist/types/components/graph/graph-tooltip.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import type { Point, XMeasureUnits, YMeasureUnits } from "./formatters";
+import type { SeriesConfig } from "./graph";
+export interface GraphTooltipProps {
+    /** Points by series label */
+    points: Map<string, Point>;
+    /** Series configuration */
+    series: Array<SeriesConfig>;
+    xMeasureUnit: XMeasureUnits;
+    yMeasureUnit: YMeasureUnits;
+    className?: string;
+    /** Position of the tooltip (x, y coordinates relative to the chart container) */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Container element to constrain tooltip within bounds */
+    containerRef?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * GraphTooltip component displays the current value and time on the graph
+ * Supports single or multiple series
+ */
+export declare function GraphTooltip({ points, series, xMeasureUnit, yMeasureUnit, className, position, containerRef, }: GraphTooltipProps): React.ReactElement | null;