@gearbox-protocol/permissionless-ui 1.22.0-next.44 → 1.22.0-next.46

package/dist/types/components/search-line/search-line.d.ts

@@ -5,7 +5,7 @@ declare const searchLineVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const searchLineInputVariants: (props?: ({
     active?: boolean | null | undefined;
-    theme?: "dark" | "light" | null | undefined;
+    theme?: "dark" | "light" | "deep-light" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface SearchLineState {
     value: string;
@@ -25,9 +25,9 @@ export interface SearchLineProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     placeholder?: string;
     /**
-     * Theme variant
+     * Theme variant (deep-light / deep-dark match interface SearchLine colors)
      */
-    theme?: "light" | "dark";
+    theme?: "light" | "dark" | "deep-light";
     /**
      * Whether to show the search icon on the left
      */
@@ -88,9 +88,9 @@ export interface WithSearchLineProps {
      */
     placeholder?: string;
     /**
-     * Theme variant
+     * Theme variant (deep-light / deep-dark match interface SearchLine colors)
      */
-    theme?: "light" | "dark";
+    theme?: "light" | "dark" | "deep-light";
     /**
      * Content to display alongside the search line
      */

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

@@ -1,93 +1,50 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-declare const segmentedControlVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "md" | null | undefined;
-    fullWidth?: boolean | null | undefined;
+/** Size variant matching A (SegmentedControlSize). */
+export type SegmentedControlSize = "md" | "sm";
+declare const rootVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * Item props for SegmentedControl (matching original interface API)
+ * Item props for SegmentedControl (matches A SegmentedControlItemProps).
  */
 export interface SegmentedControlItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    /**
-     * Label to display for this item (alias: label is also supported for convenience)
-     */
+    /** Label to display for this item (A: switchLabel). */
     switchLabel?: React.ReactNode;
-    /**
-     * Alternative label prop for convenience
-     */
+    /** Convenience alias for switchLabel. */
     label?: React.ReactNode;
-    /**
-     * Whether this item is currently selected
-     */
+    /** Whether this item is selected. */
     checked?: boolean;
-    /**
-     * Callback when this item is selected
-     */
-    onChange?: () => void;
-    /**
-     * Alternative callback prop for convenience
-     */
+    /** Callback when this item is selected (A: native onChange). */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Convenience callback (no event). */
     onSelect?: () => void;
 }
-export type SegmentedControlSize = "xs" | "sm" | "md" | "default" | "lg";
-export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof segmentedControlVariants> {
-    /**
-     * Name for the radio group
-     */
+export interface SegmentedControlProps {
+    /** Name for the radio group. */
     name: string;
-    /**
-     * Array of items to display.
-     * Each item should have:
-     * - switchLabel or label: ReactNode to display
-     * - checked: boolean indicating if selected
-     * - onChange or onSelect: callback when selected
-     * - disabled?: boolean
-     * - value?: string for the radio input
-     */
-    items: Array<SegmentedControlItemProps>;
-    /**
-     * Minimum width for each item (useful when scrollable)
-     * @example "80px" or "5rem"
-     */
-    minItemWidth?: string;
+    /** Array of items (A: Omit<SegmentedControlItemProps, "name">). */
+    items: Array<Omit<SegmentedControlItemProps, "name">>;
+    /** Size variant. @default "md" */
+    size?: SegmentedControlSize;
+    /** Extra class name. */
+    className?: string;
 }
 /**
- * SegmentedControl — toggle component for selecting between multiple options
- *
- * API matches the original @gearbox-protocol/interface implementation.
+ * SegmentedControl — toggle for mutually exclusive options (matches interface).
  *
  * @usage
- * Use SegmentedControl for mutually exclusive options:
- * view modes, time periods, filter options, toggle states.
- *
- * Sizes (size):
- * - `xs` — extra small (24px height, 10px text) — for very compact UIs.
- * - `sm` — small (28px height, text-xs).
- * - `md` — medium (40px height, text-sm) — default, matches original interface.
- * - `default` — responsive: 32px/xs on mobile, 40px/sm on desktop.
- * - `lg` — responsive: 40px/sm on mobile, 48px/base on desktop.
+ * Use for view modes, time periods, filter options.
  *
  * @example
  * ```tsx
- * // Basic usage (original API style)
  * <SegmentedControl
- *   name="view-mode"
+ *   name="view"
  *   items={[
  *     { switchLabel: "List", checked: view === "list", onChange: () => setView("list") },
  *     { switchLabel: "Grid", checked: view === "grid", onChange: () => setView("grid") },
  *   ]}
  * />
- *
- * // Using label/onSelect aliases
- * <SegmentedControl
- *   name="view-mode"
- *   items={options.map(opt => ({
- *     label: opt.label,
- *     checked: value === opt.value,
- *     onSelect: () => setValue(opt.value),
- *   }))}
- * />
  * ```
  */
 declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
-export { SegmentedControl, segmentedControlVariants };
+export { SegmentedControl, rootVariants as segmentedControlVariants };

package/dist/types/components/split-list/split-list.d.ts

@@ -1,37 +1,32 @@
 import * as React from "react";
-type ColSize = boolean | number | "auto";
+/** Column size: true = equal flex, "auto" = auto width. */
+type ColSize = boolean | "auto";
 export interface SplitListProps {
-    /**
-     * Size for each column (can be function for dynamic sizing)
-     */
+    /** Size for each column (or function for per-index). @default true */
     colSize?: ColSize | ((index: number) => ColSize);
-    /**
-     * Children content
-     */
+    /** List items. */
     children?: React.ReactNode;
-    /**
-     * Additional CSS class
-     */
+    /** Extra class name for the root. */
     className?: string;
 }
 /**
- * SplitList — horizontal list with dividers between items
+ * SplitList — horizontal list with vertical dividers between items (matches interface).
+ *
+ * @usage
+ * Use for a row of columns with centered vertical separators.
  *
  * @example
  * ```tsx
  * <SplitList colSize={true}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
+ *   <span>Item 1</span>
+ *   <span>Item 2</span>
  * </SplitList>
  *
- * // Custom sizes
- * <SplitList colSize={(index) => index === 0 ? 6 : 3}>
- *   <div>Wide</div>
- *   <div>Narrow</div>
- *   <div>Narrow</div>
+ * <SplitList colSize={(i) => (i === 0 ? true : "auto")}>
+ *   <span>Flex</span>
+ *   <span>Auto</span>
  * </SplitList>
  * ```
  */
-export declare function SplitList({ children, colSize, className, }: SplitListProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const SplitList: React.ForwardRefExoticComponent<SplitListProps & React.RefAttributes<HTMLDivElement>>;
+export { SplitList };

package/package.json

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