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

package/dist/grid-safelist.css

@@ -0,0 +1,446 @@
+/**
+ * Grid and Col Component Safelist for Tailwind CSS 4
+ *
+ * In Tailwind 4, dynamically generated classes need to be explicitly listed
+ * for JIT compilation. This file ensures all Grid/Col utility classes are available.
+ *
+ * These classes are used by the Grid and Col layout components.
+ */
+
+/* Grid column spans - used by Col component */
+.col-span-1,
+.col-span-2,
+.col-span-3,
+.col-span-4,
+.col-span-5,
+.col-span-6,
+.col-span-7,
+.col-span-8,
+.col-span-9,
+.col-span-10,
+.col-span-11,
+.col-span-12,
+.col-span-full,
+.col-auto {
+  /* Tailwind will generate these */
+}
+
+/* Responsive column spans */
+.sm\:col-span-1,
+.sm\:col-span-2,
+.sm\:col-span-3,
+.sm\:col-span-4,
+.sm\:col-span-5,
+.sm\:col-span-6,
+.sm\:col-span-7,
+.sm\:col-span-8,
+.sm\:col-span-9,
+.sm\:col-span-10,
+.sm\:col-span-11,
+.sm\:col-span-12,
+.sm\:col-span-full,
+.sm\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.md\:col-span-1,
+.md\:col-span-2,
+.md\:col-span-3,
+.md\:col-span-4,
+.md\:col-span-5,
+.md\:col-span-6,
+.md\:col-span-7,
+.md\:col-span-8,
+.md\:col-span-9,
+.md\:col-span-10,
+.md\:col-span-11,
+.md\:col-span-12,
+.md\:col-span-full,
+.md\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.lg\:col-span-1,
+.lg\:col-span-2,
+.lg\:col-span-3,
+.lg\:col-span-4,
+.lg\:col-span-5,
+.lg\:col-span-6,
+.lg\:col-span-7,
+.lg\:col-span-8,
+.lg\:col-span-9,
+.lg\:col-span-10,
+.lg\:col-span-11,
+.lg\:col-span-12,
+.lg\:col-span-full,
+.lg\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.xl\:col-span-1,
+.xl\:col-span-2,
+.xl\:col-span-3,
+.xl\:col-span-4,
+.xl\:col-span-5,
+.xl\:col-span-6,
+.xl\:col-span-7,
+.xl\:col-span-8,
+.xl\:col-span-9,
+.xl\:col-span-10,
+.xl\:col-span-11,
+.xl\:col-span-12,
+.xl\:col-span-full,
+.xl\:col-auto {
+  /* Tailwind will generate these */
+}
+
+/* Grid columns - used by Grid component */
+.grid-cols-1,
+.grid-cols-2,
+.grid-cols-3,
+.grid-cols-4,
+.grid-cols-5,
+.grid-cols-6,
+.grid-cols-7,
+.grid-cols-8,
+.grid-cols-9,
+.grid-cols-10,
+.grid-cols-11,
+.grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+/* Responsive grid columns */
+.sm\:grid-cols-1,
+.sm\:grid-cols-2,
+.sm\:grid-cols-3,
+.sm\:grid-cols-4,
+.sm\:grid-cols-5,
+.sm\:grid-cols-6,
+.sm\:grid-cols-7,
+.sm\:grid-cols-8,
+.sm\:grid-cols-9,
+.sm\:grid-cols-10,
+.sm\:grid-cols-11,
+.sm\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.md\:grid-cols-1,
+.md\:grid-cols-2,
+.md\:grid-cols-3,
+.md\:grid-cols-4,
+.md\:grid-cols-5,
+.md\:grid-cols-6,
+.md\:grid-cols-7,
+.md\:grid-cols-8,
+.md\:grid-cols-9,
+.md\:grid-cols-10,
+.md\:grid-cols-11,
+.md\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.lg\:grid-cols-1,
+.lg\:grid-cols-2,
+.lg\:grid-cols-3,
+.lg\:grid-cols-4,
+.lg\:grid-cols-5,
+.lg\:grid-cols-6,
+.lg\:grid-cols-7,
+.lg\:grid-cols-8,
+.lg\:grid-cols-9,
+.lg\:grid-cols-10,
+.lg\:grid-cols-11,
+.lg\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.xl\:grid-cols-1,
+.xl\:grid-cols-2,
+.xl\:grid-cols-3,
+.xl\:grid-cols-4,
+.xl\:grid-cols-5,
+.xl\:grid-cols-6,
+.xl\:grid-cols-7,
+.xl\:grid-cols-8,
+.xl\:grid-cols-9,
+.xl\:grid-cols-10,
+.xl\:grid-cols-11,
+.xl\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+/* Gap utilities - used by Grid component */
+.gap-0,
+.gap-1,
+.gap-2,
+.gap-3,
+.gap-4,
+.gap-5,
+.gap-6,
+.gap-7,
+.gap-8,
+.gap-9,
+.gap-10,
+.gap-12,
+.gap-16,
+.gap-20,
+.gap-24 {
+  /* Tailwind will generate these */
+}
+
+.gap-x-0,
+.gap-x-1,
+.gap-x-2,
+.gap-x-3,
+.gap-x-4,
+.gap-x-5,
+.gap-x-6,
+.gap-x-7,
+.gap-x-8,
+.gap-x-9,
+.gap-x-10,
+.gap-x-12,
+.gap-x-16,
+.gap-x-20,
+.gap-x-24 {
+  /* Tailwind will generate these */
+}
+
+.gap-y-0,
+.gap-y-1,
+.gap-y-2,
+.gap-y-3,
+.gap-y-4,
+.gap-y-5,
+.gap-y-6,
+.gap-y-7,
+.gap-y-8,
+.gap-y-9,
+.gap-y-10,
+.gap-y-12,
+.gap-y-16,
+.gap-y-20,
+.gap-y-24 {
+  /* Tailwind will generate these */
+}
+
+/* Column start positions - used by Col component */
+.col-start-1,
+.col-start-2,
+.col-start-3,
+.col-start-4,
+.col-start-5,
+.col-start-6,
+.col-start-7,
+.col-start-8,
+.col-start-9,
+.col-start-10,
+.col-start-11,
+.col-start-12,
+.col-start-13,
+.col-start-auto {
+  /* Tailwind will generate these */
+}
+
+/* Order utilities - used by Col component */
+.order-1,
+.order-2,
+.order-3,
+.order-4,
+.order-5,
+.order-6,
+.order-7,
+.order-8,
+.order-9,
+.order-10,
+.order-11,
+.order-12,
+.order-first,
+.order-last,
+.order-none {
+  /* Tailwind will generate these */
+}
+
+/* Space utilities - spacing between child elements */
+.space-y-0,
+.space-y-1,
+.space-y-2,
+.space-y-3,
+.space-y-4,
+.space-y-5,
+.space-y-6,
+.space-y-7,
+.space-y-8,
+.space-y-9,
+.space-y-10,
+.space-y-12,
+.space-y-16,
+.space-y-20,
+.space-y-24 {
+  /* Tailwind will generate these */
+}
+
+.space-x-0,
+.space-x-1,
+.space-x-2,
+.space-x-3,
+.space-x-4,
+.space-x-5,
+.space-x-6,
+.space-x-7,
+.space-x-8,
+.space-x-9,
+.space-x-10,
+.space-x-12,
+.space-x-16,
+.space-x-20,
+.space-x-24 {
+  /* Tailwind will generate these */
+}
+
+/* Responsive space utilities */
+.sm\:space-y-0,
+.sm\:space-y-1,
+.sm\:space-y-2,
+.sm\:space-y-3,
+.sm\:space-y-4,
+.sm\:space-y-5,
+.sm\:space-y-6,
+.sm\:space-y-7,
+.sm\:space-y-8,
+.sm\:space-y-9,
+.sm\:space-y-10,
+.sm\:space-y-12,
+.sm\:space-y-16,
+.sm\:space-y-20,
+.sm\:space-y-24 {
+  /* Tailwind will generate these */
+}
+
+.sm\:space-x-0,
+.sm\:space-x-1,
+.sm\:space-x-2,
+.sm\:space-x-3,
+.sm\:space-x-4,
+.sm\:space-x-5,
+.sm\:space-x-6,
+.sm\:space-x-7,
+.sm\:space-x-8,
+.sm\:space-x-9,
+.sm\:space-x-10,
+.sm\:space-x-12,
+.sm\:space-x-16,
+.sm\:space-x-20,
+.sm\:space-x-24 {
+  /* Tailwind will generate these */
+}
+
+.md\:space-y-0,
+.md\:space-y-1,
+.md\:space-y-2,
+.md\:space-y-3,
+.md\:space-y-4,
+.md\:space-y-5,
+.md\:space-y-6,
+.md\:space-y-7,
+.md\:space-y-8,
+.md\:space-y-9,
+.md\:space-y-10,
+.md\:space-y-12,
+.md\:space-y-16,
+.md\:space-y-20,
+.md\:space-y-24 {
+  /* Tailwind will generate these */
+}
+
+.md\:space-x-0,
+.md\:space-x-1,
+.md\:space-x-2,
+.md\:space-x-3,
+.md\:space-x-4,
+.md\:space-x-5,
+.md\:space-x-6,
+.md\:space-x-7,
+.md\:space-x-8,
+.md\:space-x-9,
+.md\:space-x-10,
+.md\:space-x-12,
+.md\:space-x-16,
+.md\:space-x-20,
+.md\:space-x-24 {
+  /* Tailwind will generate these */
+}
+
+.lg\:space-y-0,
+.lg\:space-y-1,
+.lg\:space-y-2,
+.lg\:space-y-3,
+.lg\:space-y-4,
+.lg\:space-y-5,
+.lg\:space-y-6,
+.lg\:space-y-7,
+.lg\:space-y-8,
+.lg\:space-y-9,
+.lg\:space-y-10,
+.lg\:space-y-12,
+.lg\:space-y-16,
+.lg\:space-y-20,
+.lg\:space-y-24 {
+  /* Tailwind will generate these */
+}
+
+.lg\:space-x-0,
+.lg\:space-x-1,
+.lg\:space-x-2,
+.lg\:space-x-3,
+.lg\:space-x-4,
+.lg\:space-x-5,
+.lg\:space-x-6,
+.lg\:space-x-7,
+.lg\:space-x-8,
+.lg\:space-x-9,
+.lg\:space-x-10,
+.lg\:space-x-12,
+.lg\:space-x-16,
+.lg\:space-x-20,
+.lg\:space-x-24 {
+  /* Tailwind will generate these */
+}
+
+.xl\:space-y-0,
+.xl\:space-y-1,
+.xl\:space-y-2,
+.xl\:space-y-3,
+.xl\:space-y-4,
+.xl\:space-y-5,
+.xl\:space-y-6,
+.xl\:space-y-7,
+.xl\:space-y-8,
+.xl\:space-y-9,
+.xl\:space-y-10,
+.xl\:space-y-12,
+.xl\:space-y-16,
+.xl\:space-y-20,
+.xl\:space-y-24 {
+  /* Tailwind will generate these */
+}
+
+.xl\:space-x-0,
+.xl\:space-x-1,
+.xl\:space-x-2,
+.xl\:space-x-3,
+.xl\:space-x-4,
+.xl\:space-x-5,
+.xl\:space-x-6,
+.xl\:space-x-7,
+.xl\:space-x-8,
+.xl\:space-x-9,
+.xl\:space-x-10,
+.xl\:space-x-12,
+.xl\:space-x-16,
+.xl\:space-x-20,
+.xl\:space-x-24 {
+  /* Tailwind will generate these */
+}

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

@@ -0,0 +1,30 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+/**
+ * Root Accordion container
+ */
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion Item
+ */
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion Trigger (clickable header)
+ */
+interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /**
+     * Hide the default expand/collapse chevron icon.
+     * @default false
+     */
+    hideIcon?: boolean;
+}
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Accordion Content (expandable content)
+ */
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Extra className for the inner wrapper div */
+    innerClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export type { AccordionTriggerProps };

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

@@ -0,0 +1 @@
+export * from './accordion';

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

@@ -0,0 +1,56 @@
+import type * as React from "react";
+export interface AddressProps {
+    /**
+     * The address to display
+     */
+    address?: string;
+    /**
+     * Whether to show a shortened version
+     * @default true
+     */
+    short?: boolean;
+    /**
+     * Number of characters to show at start
+     * @default 6
+     */
+    startChars?: number;
+    /**
+     * Number of characters to show at end
+     * @default 4
+     */
+    endChars?: number;
+    /**
+     * Whether to show copy button
+     * @default false
+     */
+    copyable?: boolean;
+    /**
+     * Children content (overrides address display)
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Address — displays a blockchain address with optional shortening and copy
+ *
+ * @example
+ * ```tsx
+ * // Short address
+ * <Address address="0x1234...5678" /> // "0x1234...5678"
+ *
+ * // Full address
+ * <Address address="0x..." short={false} />
+ *
+ * // With copy button
+ * <Address address="0x..." copyable />
+ *
+ * // Custom display
+ * <Address address="0x...">
+ *   Custom label
+ * </Address>
+ * ```
+ */
+export declare function Address({ address, short, startChars, endChars, copyable, children, className, }: AddressProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './address';

package/dist/types/components/alert-badge/alert-badge.d.ts

@@ -0,0 +1,60 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const alertBadgeVariants: (props?: ({
+    variant?: "default" | "success" | "warning" | "primary" | "alert" | "info" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size" | "color">, VariantProps<typeof alertBadgeVariants> {
+    /**
+     * Custom icon to display instead of default
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether to hide the icon
+     */
+    hideIcon?: boolean;
+    /**
+     * Alias for `variant` — for backward compatibility with legacy
+     * `@gearbox-protocol/interface` AlertBadge API.
+     * If both `color` and `variant` are provided, `variant` takes precedence.
+     */
+    color?: VariantProps<typeof alertBadgeVariants>["variant"];
+}
+/**
+ * AlertBadge — prominent badge component for alerts, warnings, and notifications
+ *
+ * @usage
+ * Use AlertBadge to display important messages or alerts:
+ * error messages, warnings, success confirmations, info banners.
+ *
+ * Variants (variant):
+ * - `default` — neutral gray badge.
+ * - `alert` — red badge for errors/critical messages.
+ * - `warning` — yellow badge for warnings.
+ * - `success` — green badge for success messages.
+ * - `info` — blue badge for informational messages.
+ * - `primary` — gradient pink badge for primary highlights.
+ *
+ * Sizes (size):
+ * - `sm` — small (14px icon, text-xs).
+ * - `default` — standard (18px icon, text-sm).
+ * - `lg` — large (22px icon, text-base).
+ *
+ * @example
+ * ```tsx
+ * <AlertBadge variant="alert">
+ *   Transaction failed
+ * </AlertBadge>
+ *
+ * <AlertBadge variant="success" fullWidth>
+ *   Account created successfully
+ * </AlertBadge>
+ *
+ * <AlertBadge variant="warning" icon={<CustomIcon />}>
+ *   Custom warning
+ * </AlertBadge>
+ * ```
+ */
+declare const AlertBadge: React.ForwardRefExoticComponent<AlertBadgeProps & React.RefAttributes<HTMLDivElement>>;
+export { AlertBadge, alertBadgeVariants };

package/dist/types/components/alert-badge/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-badge';

package/dist/types/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,47 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+/**
+ * AlertDialog — alert dialog component and its subcomponents.
+ *
+ * @usage
+ * Use AlertDialog to display critical alerts and confirmations:
+ * confirmation dialogs, warning dialogs, error alerts, destructive action confirmations.
+ *
+ * AlertDialog Components:
+ * - `AlertDialog` — root component (AlertDialogPrimitive.Root).
+ * - `AlertDialogTrigger` — trigger button that opens the dialog.
+ * - `AlertDialogContent` — dialog content container.
+ * - `AlertDialogHeader` — header section for title and description.
+ * - `AlertDialogFooter` — footer section for actions.
+ * - `AlertDialogTitle` — dialog title.
+ * - `AlertDialogDescription` — dialog description text.
+ * - `AlertDialogAction` — primary action button.
+ * - `AlertDialogCancel` — cancel/close button.
+ * - `AlertDialogOverlay` — backdrop overlay.
+ * - `AlertDialogPortal` — portal for rendering dialog.
+ *
+ * Note: All components are based on Radix UI AlertDialog primitive.
+ * Prefer using these components instead of @radix-ui/react-alert-dialog directly.
+ *
+ * Do NOT use AlertDialog:
+ * - for non-critical information (use Dialog component).
+ * - for complex forms or content (use Dialog component).
+ */
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/types/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-dialog';

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

@@ -0,0 +1,28 @@
+import { LocaleKeys } from '../../locale';
+import * as React from "react";
+export interface AlertModalProps {
+    /** Whether the modal is shown. */
+    show: boolean;
+    /** Intl message id for the title. */
+    title: LocaleKeys;
+    /** Intl message id for the body/description. */
+    body: LocaleKeys;
+    /** Callback when the modal is closed (e.g. OK or overlay click). */
+    onHide: () => void;
+    /** Callback when the modal is confirmed. */
+    onConfirm?: () => void;
+}
+/**
+ * AlertModal — simple alert dialog for confirmations and notifications.
+ * Uses DialogModalContainer; show, title (LocaleKeys), body (LocaleKeys), onHide; single OK button with intl.
+ *
+ * @usage
+ * Use for blocking alerts with intl title and body.
+ *
+ * @example
+ * ```tsx
+ * <AlertModal show={show} title="components.some.title" body="components.some.body" onHide={() => setShow(false)} />
+ * ```
+ */
+declare const AlertModal: React.ForwardRefExoticComponent<AlertModalProps & React.RefAttributes<HTMLDivElement>>;
+export { AlertModal };

package/dist/types/components/alert-modal/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-modal';