@gearbox-protocol/permissionless-ui 1.22.7 → 1.23.1

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

@@ -18,11 +18,23 @@ type VerticalLineOptions = Partial<{
     labelTextColor: string;
     showLabel: boolean;
 }>;
+/**
+ * Palette ordered for maximum contrast; first color is the original teal.
+ * Greens/teals are spread out so that when only a subset of series is visible,
+ * similar colors are not repeated.
+ */
 export declare const DEFAULT_SERIES_COLORS: {
     line: string;
     top: string;
     bottom: string;
 }[];
+export type SeriesColorPalette = (typeof DEFAULT_SERIES_COLORS)[number];
+/**
+ * Returns a color palette for a series by index. Uses predefined palette for
+ * the first N series; generates distinct colors for additional series so they
+ * never repeat.
+ */
+export declare function getSeriesColorPalette(index: number): SeriesColorPalette;
 export interface GraphProps {
     /** Series configuration - can be single or multiple series */
     series: Array<SeriesConfig>;

package/dist/types/components/percent-indicator/percent-indicator.d.ts

@@ -14,15 +14,10 @@ export interface PercentIndicatorProps extends React.HTMLAttributes<HTMLDivEleme
      * @default true
      */
     showColor?: boolean;
+    /**
+     * Show progress bar below the value
+     * @default true
+     */
+    showProgressBar?: boolean;
 }
-/**
- * PercentIndicator component for displaying percentage values with optional color coding
- *
- * @example
- * ```tsx
- * <PercentIndicator percent={75} />  // Shows "75.00%"
- * <PercentIndicator percent={50} decimals={1} />  // Shows "50.0%"
- * <PercentIndicator percent={95} showColor={false} />  // No color coding
- * ```
- */
-export declare function PercentIndicator({ percent, decimals, showColor, className, ...props }: PercentIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function PercentIndicator({ percent, decimals, showColor, showProgressBar, className, ...props }: PercentIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/progress/progress.d.ts

@@ -4,7 +4,7 @@ export interface ProgressProps extends React.ComponentPropsWithoutRef<typeof Pro
     /**
      * Visual variant based on progress status
      */
-    variant?: "default" | "success" | "warning" | "danger";
+    variant?: "default" | "success" | "warning" | "danger" | "info";
     /**
      * Size of the progress bar
      */

package/dist/types/components/tab-control/tab-control.d.ts

@@ -10,7 +10,7 @@ export interface TabControlProps<T extends string> {
     variant?: "equal" | "auto";
     tabItemWrapPadding?: string;
 }
-export declare function TabControl<T extends string>({ tabs, state: controlState, variant, showBorder, tabItemWrapPadding, }: TabControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TabControl<T extends string>({ tabs, state: controlState, showBorder, tabItemWrapPadding, variant, }: TabControlProps<T>): import("react/jsx-runtime").JSX.Element;
 interface TabItemProps {
     icon?: React.ReactNode;
     label: React.ReactNode;

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

@@ -5,7 +5,6 @@ export * from './grid-error-line';
 export * from './grid-loading-line';
 export * from './grid-table';
 export * from './grid-table-loader';
-export * from './sortable-head-cell';
 export * from './table';
 export * from './table-loader';
 export * from './table-loader-guard';

package/dist/types/utils/colors.d.ts

@@ -27,3 +27,11 @@ export declare function generateColorsFromBase(color: string): {
     topColor: string;
     bottomColor: string;
 };
+/**
+ * Converts HSL to hex color.
+ * @param h - Hue 0-360
+ * @param s - Saturation 0-100
+ * @param l - Lightness 0-100
+ * @returns Hex color string
+ */
+export declare function hslToHex(h: number, s: number, l: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.7",
+  "version": "1.23.1",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",

package/dist/cjs/components/table/sortable-head-cell.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@fortawesome/free-solid-svg-icons"),n=require("../icons/fa-icon.cjs");function a({title:r,sortType:s,onSort:c,className:t}){return e.jsxs("button",{type:"button",onClick:c,className:`flex items-center justify-end gap-1 hover:text-foreground transition-colors cursor-pointer ${t||""}`,children:[r,s==="asc"?e.jsx(n.FaIcon,{icon:o.faArrowUp,className:"size-3.5"}):s==="desc"?e.jsx(n.FaIcon,{icon:o.faArrowDown,className:"size-3.5"}):e.jsx(n.FaIcon,{icon:o.faArrowsUpDown,className:"size-3.5 opacity-50"})]})}exports.SortableHeadCell=a;

package/dist/esm/components/table/sortable-head-cell.js

@@ -1,25 +0,0 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { faArrowUp as i, faArrowDown as c, faArrowsUpDown as l } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as r } from "../icons/fa-icon.js";
-function u({
-  title: s,
-  sortType: e,
-  onSort: t,
-  className: n
-}) {
-  return /* @__PURE__ */ a(
-    "button",
-    {
-      type: "button",
-      onClick: t,
-      className: `flex items-center justify-end gap-1 hover:text-foreground transition-colors cursor-pointer ${n || ""}`,
-      children: [
-        s,
-        e === "asc" ? /* @__PURE__ */ o(r, { icon: i, className: "size-3.5" }) : e === "desc" ? /* @__PURE__ */ o(r, { icon: c, className: "size-3.5" }) : /* @__PURE__ */ o(r, { icon: l, className: "size-3.5 opacity-50" })
-      ]
-    }
-  );
-}
-export {
-  u as SortableHeadCell
-};

package/dist/types/components/table/sortable-head-cell.d.ts

@@ -1,36 +0,0 @@
-import { SortType } from '../../utils/sort';
-import type * as React from "react";
-/**
- * SortableHeadCellProps — props for SortableHeadCell component.
- */
-export interface SortableHeadCellProps {
-    title: React.ReactNode;
-    sortType?: SortType;
-    onSort: () => void;
-    className?: string;
-}
-/**
- * SortableHeadCell — sortable table header cell component with sort indicators.
- *
- * @usage
- * Use SortableHeadCell to create clickable, sortable table column headers:
- * sortable data tables, sortable lists, interactive table headers with sort direction indicators.
- *
- * Props:
- * - `title` — header content/title (required).
- * - `sortType` — current sort type: "asc", "desc", or undefined (no sort).
- * - `onSort` — callback function to toggle sort (required).
- * - `className` — additional CSS classes for styling.
- *
- * Note: Displays ArrowUp for ascending, ArrowDown for descending, or ArrowUpDown (faded) when not sorted. Clicking toggles sort direction.
- *
- * @example
- * ```tsx
- * <SortableHeadCell
- *   title="Name"
- *   sortType={getSortForField("name", currentSort)}
- *   onSort={() => setSortField("name")}
- * />
- * ```
- */
-export declare function SortableHeadCell({ title, sortType, onSort, className, }: SortableHeadCellProps): React.ReactElement;