@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/types/configs/design-tokens.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Design tokens for consistency across the UI library
+ */
+export declare const designTokens: {
+    readonly colors: {
+        readonly primary: "rgb(59, 130, 246)";
+        readonly secondary: "rgb(100, 116, 139)";
+        readonly destructive: "rgb(239, 68, 68)";
+        readonly success: "rgb(34, 197, 94)";
+        readonly warning: "rgb(251, 191, 36)";
+    };
+    readonly spacing: {
+        readonly xs: "0.5rem";
+        readonly sm: "0.75rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+    };
+    readonly borderRadius: {
+        readonly sm: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly full: "9999px";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+            readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly "2xl": "1.5rem";
+            readonly "3xl": "1.875rem";
+            readonly "4xl": "2.25rem";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+    readonly animation: {
+        readonly duration: {
+            readonly fast: "150ms";
+            readonly normal: "300ms";
+            readonly slow: "500ms";
+        };
+        readonly easing: {
+            readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly easeOut: "cubic-bezier(0.0, 0, 0.2, 1)";
+            readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        };
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    };
+};
+export type DesignTokens = typeof designTokens;

package/dist/types/configs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './design-tokens';
+export { default as tailwindConfig, preset } from './tailwind.config';
+export { default as tailwindPreset } from './tailwind-preset';
+export * from './variants';

package/dist/types/configs/tailwind-preset.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Tailwind CSS preset for @gearbox-protocol/ui-kit
+ *
+ * This preset includes:
+ * - Design tokens (colors, spacing, typography, etc.)
+ * - Custom animations
+ * - Safelist for dynamic classes (Grid, Col components)
+ * - Content paths for class generation
+ *
+ * @example
+ * ```ts
+ * // tailwind.config.ts
+ * import { preset } from '@gearbox-protocol/ui-kit/preset';
+ *
+ * export default {
+ *   presets: [preset],
+ *   content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ * };
+ * ```
+ */
+export declare const preset: {
+    darkMode: "class";
+    safelist: (string | {
+        pattern: RegExp;
+    })[];
+    theme: {
+        extend: {
+            screens: {
+                xs: string;
+            };
+            colors: {
+                background: string;
+                foreground: string;
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                success: string;
+                "success-foreground": string;
+                "success-hover": string;
+                warning: string;
+                liquidation: string;
+                border: string;
+                input: string;
+                ring: string;
+                "text-secondary": string;
+                "dropdown-dark-button": string;
+                white: string;
+                black: string;
+                gray: {
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    100: string;
+                    110: string;
+                };
+                chart: {
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
+                    "5": string;
+                };
+            };
+            fontFamily: {
+                sans: string[];
+            };
+            borderRadius: {
+                lg: string;
+                md: string;
+                sm: string;
+            };
+            keyframes: {
+                "accordion-down": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+                "accordion-up": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            animation: {
+                "accordion-down": string;
+                "accordion-up": string;
+            };
+        };
+    };
+    plugins: any[];
+};
+export default preset;

package/dist/types/configs/tailwind.config.d.ts

@@ -0,0 +1,32 @@
+import { Config } from 'tailwindcss';
+import { preset } from './tailwind-preset';
+/**
+ * Tailwind configuration for consuming applications
+ *
+ * This configuration can be extended in your project's tailwind.config.ts
+ *
+ * @example
+ * ```ts
+ * // Option 1: Use as preset (recommended)
+ * import { preset } from '@gearbox-protocol/ui-kit/preset';
+ *
+ * export default {
+ *   presets: [preset],
+ *   content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ * };
+ *
+ * // Option 2: Extend this config
+ * import tailwindConfig from '@gearbox-protocol/ui-kit/tailwind';
+ *
+ * export default {
+ *   ...tailwindConfig,
+ *   content: [
+ *     './src/**\/*.{js,ts,jsx,tsx}',
+ *     './node_modules/@gearbox-protocol/ui-kit/dist/**\/*.js',
+ *   ],
+ * };
+ * ```
+ */
+declare const tailwindConfig: Config;
+export default tailwindConfig;
+export { preset };

package/dist/types/configs/variants.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Centralized variant definitions for reuse across components
+ */
+export declare const sizeVariants: {
+    readonly xs: "text-xs";
+    readonly sm: "text-sm";
+    readonly default: "text-sm";
+    readonly lg: "text-base";
+    readonly xl: "text-lg";
+};
+export declare const stateVariants: {
+    readonly default: "";
+    readonly error: "border-red-500 text-red-500 focus-visible:ring-red-500";
+    readonly success: "border-green-500 text-green-500 focus-visible:ring-green-500";
+    readonly warning: "border-yellow-500 text-yellow-500 focus-visible:ring-yellow-500";
+};
+export declare const paddingVariants: {
+    readonly none: "p-0";
+    readonly xs: "p-2";
+    readonly sm: "p-4";
+    readonly default: "p-6";
+    readonly lg: "p-8";
+    readonly xl: "p-10";
+};
+export declare const interactiveVariants: {
+    readonly default: "transition-colors duration-200";
+    readonly disabled: "opacity-50 cursor-not-allowed pointer-events-none";
+};

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,11 @@
+export * from './use-checkbox-select';
+export * from './use-controllable-state';
+export * from './use-debounce';
+export * from './use-debounce-call';
+export * from './use-filter';
+export * from './use-hf';
+export * from './use-liquidation';
+export * from './use-media-query';
+export * from './use-opened-state';
+export * from './use-previous';
+export * from './use-smart-number-input';

package/dist/types/hooks/use-checkbox-select.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Represents an item with checkbox state
+ */
+export interface Checkable<T> {
+    /**
+     * The original item
+     */
+    item: T;
+    /**
+     * Whether the item is checked
+     */
+    checked: boolean;
+    /**
+     * Index in the original array
+     */
+    index: number;
+}
+/**
+ * Result of useCheckboxSelect hook
+ */
+export interface CheckboxState<T> {
+    /**
+     * Whether all items are checked
+     */
+    allChecked: boolean;
+    /**
+     * Array of checkable items with their state
+     */
+    checkItems: Checkable<T>[];
+    /**
+     * Toggle all items on/off
+     * @param newState - Optional: force a specific state
+     */
+    handleClickAll: (newState?: boolean) => void;
+    /**
+     * Toggle a single item by index
+     * @param index - Index of the item to toggle
+     */
+    handleClickSingle: (index: number) => void;
+    /**
+     * Directly set the check items state
+     */
+    setCheckItems: (items: Checkable<T>[]) => void;
+    /**
+     * Get only the checked items
+     */
+    checkedItems: T[];
+    /**
+     * Get the count of checked items
+     */
+    checkedCount: number;
+}
+/**
+ * useCheckboxSelect — hook for managing checkbox selection state.
+ *
+ * @usage
+ * Use this hook when you need to manage selection state for a list of items:
+ * - Multi-select lists
+ * - Bulk actions on table rows
+ * - Token selection dialogs
+ * - Asset enable/disable toggles
+ *
+ * @param items - Array of items to make selectable
+ * @param defaultChecked - Default checked state (boolean or array of booleans)
+ * @param respectUserSelect - When false, resets to defaults when defaults change
+ * @returns Checkbox state and handlers
+ *
+ * @example
+ * ```tsx
+ * const tokens = [{ symbol: "ETH" }, { symbol: "USDC" }];
+ *
+ * const {
+ *   allChecked,
+ *   checkItems,
+ *   handleClickAll,
+ *   handleClickSingle,
+ *   checkedItems,
+ * } = useCheckboxSelect(tokens);
+ *
+ * return (
+ *   <div>
+ *     <Checkbox checked={allChecked} onChange={() => handleClickAll()}>
+ *       Select All
+ *     </Checkbox>
+ *
+ *     {checkItems.map(({ item, checked, index }) => (
+ *       <Checkbox
+ *         key={index}
+ *         checked={checked}
+ *         onChange={() => handleClickSingle(index)}
+ *       >
+ *         {item.symbol}
+ *       </Checkbox>
+ *     ))}
+ *
+ *     <div>Selected: {checkedItems.length}</div>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useCheckboxSelect<T>(items: T[], defaultChecked?: boolean | boolean[], respectUserSelect?: boolean): CheckboxState<T>;

package/dist/types/hooks/use-controllable-state.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Hook for managing controlled/uncontrolled component state
+ *
+ * This allows components to work both in controlled mode (when value is provided)
+ * and uncontrolled mode (when only defaultValue is provided)
+ *
+ * @example
+ * ```tsx
+ * function MyInput({ value, defaultValue, onChange }) {
+ *   const [internalValue, setInternalValue] = useControllableState({
+ *     value,
+ *     defaultValue,
+ *     onChange
+ *   });
+ *
+ *   return <input value={internalValue} onChange={e => setInternalValue(e.target.value)} />;
+ * }
+ * ```
+ */
+export declare function useControllableState<T>({ value: controlledValue, defaultValue, onChange, }: {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+}): readonly [T | undefined, (nextValue: T | ((prev: T) => T)) => void];

package/dist/types/hooks/use-debounce-call.d.ts

@@ -0,0 +1 @@
+export declare function useDebounceCall(delay?: number): (arg: () => void) => void;

package/dist/types/hooks/use-debounce.d.ts

@@ -0,0 +1,17 @@
+type Task<T> = (arg: T) => void;
+/**
+ * Hook to debounce a function call
+ *
+ * @example
+ * ```tsx
+ * const handleSearch = (query: string) => {
+ *   console.log('Searching for:', query);
+ * };
+ * const debouncedSearch = useDebounce(handleSearch, 500);
+ *
+ * // Usage:
+ * debouncedSearch('query');
+ * ```
+ */
+export declare function useDebounce<T>(call: Task<T>, delay?: number): (arg: T) => void;
+export {};

package/dist/types/hooks/use-filter.d.ts

@@ -0,0 +1,37 @@
+import { FilterRange } from '../types/filter';
+export interface SelectFilterList<T> {
+    items: Array<T>;
+    label: string;
+}
+/**
+ * Hook for managing range filter state
+ */
+export declare function useRangeFilter(): readonly [FilterRange | null, import('react').Dispatch<import('react').SetStateAction<FilterRange | null>>, () => void];
+/**
+ * Hook for managing select filter state
+ */
+export declare function useSelectFilter<T>(initialState?: SelectFilterList<T> | null): readonly [SelectFilterList<T> | null, import('react').Dispatch<import('react').SetStateAction<SelectFilterList<T> | null>>, () => void];
+type SortType = "desc" | "asc";
+export interface FilterSortField<T> {
+    field: T;
+    sort: SortType;
+}
+export type SortField<T> = FilterSortField<T>;
+export declare const getSortForField: <T>(s: T, state: FilterSortField<T> | null) => SortType | undefined;
+export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Hook for managing sort state
+ */
+export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+interface GeneralRangeFilterState {
+    state: FilterRange | null;
+}
+interface GeneralSelectFilterState<T> {
+    state: SelectFilterList<T> | null;
+}
+/**
+ * Hook to check if any/all filters are selected
+ * Returns [anySelected, allSelected]
+ */
+export declare function useFilterAllSelected(filterState: Record<string, GeneralRangeFilterState | GeneralSelectFilterState<any>>): [boolean, boolean];
+export type { FilterRange };

package/dist/types/hooks/use-hf.d.ts

@@ -0,0 +1,17 @@
+import { Asset } from '@gearbox-protocol/sdk';
+import { Address } from 'viem';
+import { QuotasInfoList, TokenFullData } from '../types/common';
+export interface UseHFProps {
+    quotas: Record<Address, Asset>;
+    quotasInfo: QuotasInfoList;
+    assets: Array<Asset>;
+    prices: Record<Address, bigint>;
+    liquidationThresholds: Record<Address, bigint>;
+    underlyingToken: Address;
+    debt: bigint;
+    tokensList: Record<Address, TokenFullData>;
+    allowZeroDebt?: boolean;
+}
+export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, allowZeroDebt, tokensList, }: UseHFProps): {
+    hf: number;
+};

package/dist/types/hooks/use-liquidation/index.d.ts

@@ -0,0 +1,53 @@
+import { Asset } from '@gearbox-protocol/sdk';
+import { Cell } from 'reactochart/ColorHeatmap';
+import { Address } from 'viem';
+import { LiquidationThresholds, QuotasInfoList, TokenFullData } from '../../types/common';
+import { AxisParams, Point } from './types';
+export type { AxisOrder, AxisParams, Point as LiquidationPoint } from './types';
+export type { Cell } from './utils';
+export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MAX, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useAxis, useFixedAssets, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, usePriceInNumber, useWithLiquidationGraphActivePrices, } from './utils';
+interface UseLiquidationHeatmapProps {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    xLabel?: TokenFullData;
+    yLabel?: TokenFullData;
+    assets: Array<Asset>;
+    quotas: Record<Address, Asset>;
+    prices: Record<Address, bigint>;
+    liquidationThresholds: Record<Address, bigint>;
+    underlyingTokenAddress: Address;
+    debt: bigint;
+    quotasInfo: QuotasInfoList;
+    tokensList: Record<Address, TokenFullData>;
+}
+export declare function useLiquidationHeatmap({ xMin, xMax, yMin, yMax, xLabel, yLabel, assets, quotas, prices, liquidationThresholds, quotasInfo, underlyingTokenAddress, debt, tokensList, }: UseLiquidationHeatmapProps): Cell[];
+interface UseEditPriceManuallyProps {
+    prices: Record<Address, bigint>;
+}
+export declare function useEditPriceManually({ prices }: UseEditPriceManuallyProps): readonly [{}, (newPrice: bigint, token: Address) => void];
+export interface UseLiquidationGraphParamsReturnType {
+    xAxis?: AxisParams;
+    yAxis?: AxisParams;
+    currentPoint: Point;
+    fixedBalances: Array<Asset>;
+}
+export interface UseLiquidationGraphParamsProps {
+    assets: Array<Asset>;
+    liquidationThresholds: LiquidationThresholds;
+    quotas: Record<Address, Asset>;
+    quotasInfo: QuotasInfoList;
+    tokensList: Record<Address, TokenFullData>;
+    prices: Record<Address, bigint>;
+}
+/**
+ * Props type for Credit Session Details Liquidation Dialog
+ * Extends UseLiquidationGraphParamsProps with additional fields
+ */
+export type CreditSessionDetailsLiquidationDialogProps = Omit<UseLiquidationGraphParamsProps, "assets"> & {
+    assetsSorted: Array<Asset>;
+    underlyingToken: Address;
+    debt: bigint;
+};
+export declare function useLiquidationGraphParams({ assets, liquidationThresholds, quotas, quotasInfo, tokensList, prices, }: UseLiquidationGraphParamsProps): UseLiquidationGraphParamsReturnType;

package/dist/types/hooks/use-liquidation/types.d.ts

@@ -0,0 +1,16 @@
+import { TokenFullData } from '../../types/common';
+export interface Coordinates {
+    x: number;
+    y: number;
+}
+export type AxisOrder = "reverse" | "straight";
+export interface AxisParams {
+    min: number;
+    max: number;
+    minHf: number;
+    label: TokenFullData;
+    order: AxisOrder;
+    nextOrder: () => void;
+}
+export type Point = [x: number, y: number];
+export type LiquidationPoint = Point;

package/dist/types/hooks/use-liquidation/utils.d.ts

@@ -0,0 +1,71 @@
+import { Asset } from '@gearbox-protocol/sdk';
+import { Cell as ReactochartCell } from 'reactochart/ColorHeatmap';
+import { Address } from 'viem';
+import { LiquidationThresholds, QuotasInfoList, TokenFullData } from '../../types/common';
+import { AxisOrder, AxisParams, Point } from './types';
+export interface Cell extends ReactochartCell {
+    x: number;
+    xEnd: number;
+    y: number;
+    yEnd: number;
+    value: number;
+}
+export declare const CELL_HOVERED = "rct-chart__heatmap-cell--hovered";
+export declare const CELL_CURRENT = "rct-chart__heatmap-cell--current";
+export declare const CELL_GOOD = "rct-chart__heatmap-cell--good";
+export declare const CELL_OK = "rct-chart__heatmap-cell--ok";
+export declare const CELL_BAD = "rct-chart__heatmap-cell--bad";
+export declare const CELL_LIQUIDATION = "rct-chart__heatmap-cell--liquidation";
+interface UseAxisProps {
+    currentPrice: number | undefined;
+    token: TokenFullData | undefined;
+}
+export declare const DEFAULT_AXIS_MIN = 0;
+export declare const DEFAULT_AXIS_MAX = 1;
+export declare function useAxis({ token, currentPrice, }: UseAxisProps): AxisParams | undefined;
+interface UseFixedAssetsProps {
+    assets: Array<Asset>;
+    liquidationThresholds: LiquidationThresholds;
+    quotas: Record<Address, Asset>;
+    quotasInfo: QuotasInfoList;
+    at?: number;
+    length?: number;
+}
+export declare function useFixedAssets({ assets, liquidationThresholds, quotas, quotasInfo, at, length, }: UseFixedAssetsProps): [Asset[], Asset[]];
+interface UsePriceInNumberProps {
+    asset: Asset | undefined;
+    tokensList: Record<Address, TokenFullData>;
+    prices: Record<Address, bigint>;
+}
+type UsePriceInNumberReturnType = [
+    price: number | undefined,
+    token: TokenFullData | undefined
+];
+export declare function usePriceInNumber({ asset, tokensList, prices, }: UsePriceInNumberProps): UsePriceInNumberReturnType;
+export declare function useIsAxisInRelativeUnits(axis: TokenFullData | undefined, underlying: TokenFullData | undefined): boolean;
+/**
+ * Format price value for liquidation graph tooltip
+ * Re-exports formatPrice from utils with liquidation-specific defaults
+ */
+export declare function formatAxisTipPrice(v: number): string;
+export declare function formatAxisTipLabel(token: TokenFullData | undefined, underlyingToken: TokenFullData | undefined, order: AxisOrder | undefined): string;
+export declare function formatAxisLabel(underlyingPrice: bigint | undefined, isRelative: boolean, order?: AxisOrder): (l?: number) => string;
+export declare function useLiquidationGraphActivePrice(activePoint: number, underlyingPrice: bigint | undefined, isRelative: boolean, order?: AxisOrder): number;
+export declare function useLiquidationGraphCurrentActiveValue(): {
+    activePoint: [number | undefined, number | undefined] | null;
+    handleMouseMove: ({ xValue, yValue, }: {
+        xValue: number | null;
+        yValue: number | null;
+    }) => void;
+    handleMouseLeave: () => void;
+};
+interface UseWithActivePricesProps {
+    xLabel: TokenFullData | undefined;
+    yLabel: TokenFullData | undefined;
+    activePoint: [number | undefined, number | undefined] | null;
+    prices: Record<Address, bigint>;
+}
+export declare function useWithLiquidationGraphActivePrices({ xLabel, yLabel, activePoint, prices, }: UseWithActivePricesProps): {};
+export declare function isPointInCell(p: Point, c: Cell): boolean;
+export declare function getCellClass(p: Cell, currentPoint: Point, activePointX?: number, activePointY?: number): string;
+export {};

package/dist/types/hooks/use-media-query.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Hook for responsive media queries
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useMediaQuery("(max-width: 768px)");
+ *
+ *   return <div>{isMobile ? "Mobile view" : "Desktop view"}</div>;
+ * }
+ * ```
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * Checks if the viewport is mobile-sized (max-width: 500px-)
+ */
+export declare const useIsExtraSmall: () => boolean;
+/**
+ * Checks if the viewport is mobile-sized (max-width: 768px)
+ */
+export declare const useIsMobile: () => boolean;
+/**
+ * Checks if the viewport is tablet-sized (768px - 1024px)
+ */
+export declare const useIsTablet: () => boolean;
+/**
+ * Checks if the viewport is medium-sized or smaller (max-width: 1024px)
+ */
+export declare const useIsMedium: () => boolean;
+/**
+ * Checks if the viewport is desktop-sized (min-width: 1024px)
+ */
+export declare const useIsDesktop: () => boolean;