@avalabs/k2-alpine 0.0.0-main-94bbb8c → 0.0.0-main-e579735

package/dist/src/components/Banner/Banner.d.ts

@@ -0,0 +1,28 @@
+import { SxProps, Theme } from '@mui/material';
+import { default as React } from 'react';
+export type BannerSeverity = 'info' | 'warning' | 'error';
+export type BannerAction = {
+    readonly label: string;
+    /** When set, renders an anchor that opens in a new tab. */
+    readonly href?: string;
+    readonly onClick?: () => void;
+};
+export type BannerProps = {
+    /** Drives the icon + accent color. @default 'info' */
+    readonly severity?: BannerSeverity;
+    /** Message content (shown in the accent color). */
+    readonly children: React.ReactNode;
+    /** Override the leading icon. */
+    readonly icon?: React.ReactNode;
+    /** Optional trailing CTA button. */
+    readonly action?: BannerAction;
+    readonly 'data-testid'?: string;
+    readonly sx?: SxProps<Theme>;
+};
+/**
+ * A rounded notice bar: leading icon + message + optional CTA button. Used for
+ * region/geo restrictions and other inline notices. Theme-driven — `info` uses
+ * the neutral text color, `warning` the theme warning color, `error` the theme
+ * error color.
+ */
+export declare function Banner({ severity, children, icon, action, sx, ...rest }: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Button/SegmentedButton.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from '@mui/material';
+export type SegmentedButtonSegment = 'solo' | 'left' | 'right' | 'top' | 'bottom';
+export type SegmentedButtonProps = ButtonProps & {
+    /** Position within a joined group — controls which corners are rounded vs squared. @default 'solo' */
+    segment?: SegmentedButtonSegment;
+    /** Rounded (outer) corner radius. @default 20 */
+    outerRadius?: number | string;
+    /** Squared (inner) corner radius where buttons join. @default 4 */
+    innerRadius?: number | string;
+};
+/**
+ * A `Button` whose border-radius adapts to its position in a joined group, so
+ * adjacent buttons read as one shape (e.g. a Withdraw / Deposit or Market /
+ * Limit close pair). `segment="solo"` is a normal fully-rounded pill. All other
+ * `Button` props (`variant`, `color`, `size`, `sx`, …) behave as usual.
+ */
+export declare function SegmentedButton({ segment, outerRadius, innerRadius, sx, ...rest }: SegmentedButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Checklist/Checklist.d.ts

@@ -0,0 +1,43 @@
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+export interface ChecklistItem {
+    /** Title shown next to the index. */
+    readonly title: string;
+    /** Supporting copy shown beneath the title. */
+    readonly description: string;
+    /**
+     * When `true`, the row's action button is replaced by the completion icon
+     * (defaults to {@link TaskAlt} in `successAlt.main`). The leading index
+     * never changes — only the trailing slot reflects state.
+     */
+    readonly done: boolean;
+    /** Label of the action button while the item is pending. */
+    readonly actionLabel: string;
+    /** Click handler for the action button. */
+    readonly onAction: () => void;
+    /**
+     * Disable the action button without marking the item complete. Used to
+     * gate later steps on earlier ones (e.g. step 2 unlocks once step 1 flips
+     * to `done`).
+     */
+    readonly actionDisabled?: boolean;
+    /** Optional `data-testid` for the pending-state action button. */
+    readonly actionTestId?: string;
+}
+export interface ChecklistProps {
+    /** Items rendered top-down. The 1-based index is derived from array order. */
+    readonly items: readonly ChecklistItem[];
+    /** Optional override for the icon shown when an item is `done`. */
+    readonly completedIcon?: ReactNode;
+    readonly sx?: SxProps<Theme>;
+}
+/**
+ * Vertical list of completable items with a numeric index, title,
+ * description, and an action button or completion icon at the trailing
+ * edge. Designed for one-time setup flows (e.g. the perps "Set up trading
+ * account" panel) where each item maps to a single user-driven action.
+ *
+ * Uses theme tokens (`background.paper`, `divider`, `text.primary`, …) so it
+ * blends into both light and dark modes.
+ */
+export declare const Checklist: ({ items, completedIcon, sx }: ChecklistProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Checklist/index.d.ts

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

package/dist/src/components/CircularDial/CircularDial.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A preset chip below the dial. `fraction` is multiplied across the
+ * `[min, max]` range — e.g. `{ label: '50%', fraction: 0.5 }` on a dial
+ * with `min = 0`, `max = 100` snaps the value to 50.
+ */
+export type PresetButton = {
+    readonly label: string;
+    readonly fraction: number;
+};
+export type CircularDialProps = {
+    /** Controlled value. */
+    readonly value: number;
+    readonly onChange: (next: number) => void;
+    /** Required upper bound. */
+    readonly max: number;
+    /** Lower bound. Default `0`. Values below render with a danger style. */
+    readonly min?: number;
+    /** Snap step. Default `0.01`. */
+    readonly step?: number;
+    /** Cap manual-input precision; default derived from `step`. */
+    readonly maxDecimals?: number;
+    /** Small line above the readout (e.g. `"Market"`). */
+    readonly label?: string;
+    /** Secondary line below the readout (e.g. fiat conversion). */
+    readonly caption?: string;
+    /** Allow click-to-edit text input over the readout. */
+    readonly enableManualInput?: boolean;
+    /** Preset chips rendered below the dial. */
+    readonly presets?: readonly PresetButton[];
+    /** Prefix for the readout (e.g. `"$"`). */
+    readonly prefix?: string;
+    /** Suffix for the readout (e.g. `" AVAX"`). */
+    readonly suffix?: string;
+    /** Outer width in px. Default `210` (Figma frame). */
+    readonly size?: number;
+    /** Override arc color. Default: `theme.palette.success.main`. */
+    readonly accentColor?: string;
+    /** Disable interaction. */
+    readonly disabled?: boolean;
+};
+/**
+ * Half-circle gauge dial used for amount selection (e.g. partial close
+ * size, leverage adjustment). The user can:
+ *   - Drag anywhere on the dial — the closest point on the arc snaps to.
+ *   - Click anywhere on the arc — same as drag start.
+ *   - Tap a preset chip (e.g. 25/50/75/Max).
+ *   - Click the readout to type an exact value (when `enableManualInput`).
+ *   - Use ↑/→ to step up, ↓/← to step down, `Home`/`End` to jump to bounds
+ *     when the dial has keyboard focus.
+ *
+ * Web equivalent of `core-mobile`'s `CircularDial` (PR #3802) — same API,
+ * no Skia/Reanimated/haptics dependency.
+ */
+export declare function CircularDial({ value, onChange, max, min, step, maxDecimals, label, caption, enableManualInput, presets, prefix, suffix, size, accentColor, disabled, }: CircularDialProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CircularDial/index.d.ts

@@ -0,0 +1 @@
+export { CircularDial, type CircularDialProps, type PresetButton } from './CircularDial';

package/dist/src/components/Icons/CandlestickChart.d.ts

@@ -0,0 +1,2 @@
+import { IconBaseProps } from 'react-icons';
+export declare const CandlestickChart: ({ size, ...rest }: IconBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Icons/TaskAlt.d.ts

@@ -0,0 +1,8 @@
+import { IconBaseProps } from 'react-icons';
+/**
+ * "Task / completed" icon (rounded check inside an open circle). Used to
+ * mark a step in a setup flow as completed; pair with `successAlt.main`
+ * (`#3AC489`) to match the design system's "done" state. Colour comes from
+ * `currentColor` so consumers can recolour via `sx={{ color }}`.
+ */
+export declare const TaskAlt: ({ size, ...rest }: IconBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Icons/index.d.ts

@@ -85,6 +85,9 @@ export declare const AvaGptLightIcon: import('react').ComponentType<IconBaseProp
 /**
  * Sidebar Icons
  */
+export declare const CandlestickChartIcon: import('react').ComponentType<IconBaseProps & {
+    sx?: SxProps;
+} & import('../..').WithSxProps>;
 export declare const ContactsIcon: import('react').ComponentType<IconBaseProps & {
     sx?: SxProps;
 } & import('../..').WithSxProps>;
@@ -391,3 +394,9 @@ export declare const CheckCircleIcon: import('react').ComponentType<IconBaseProp
 export declare const PaceClockIcon: import('react').ComponentType<IconBaseProps & {
     sx?: SxProps;
 } & import('../..').WithSxProps>;
+/**
+ * Status Icons
+ */
+export declare const TaskAltIcon: import('react').ComponentType<IconBaseProps & {
+    sx?: SxProps;
+} & import('../..').WithSxProps>;

package/dist/src/components/LimitPriceInput/LimitPriceInput.d.ts

@@ -0,0 +1,52 @@
+/**
+ * A preset chip below the price input. Clicking it sets the value to
+ * `reference * (1 + pct)`. Use a negative `pct` for "below reference"
+ * presets (e.g. closing a short above mark).
+ */
+export type LimitPricePreset = {
+    /** Display label, e.g. "+5%" or "−10%". */
+    readonly label: string;
+    /** Percentage offset applied to `reference`. `0.05` = +5%, `-0.10` = −10%. */
+    readonly pct: number;
+};
+export type LimitPriceInputProps = {
+    /** Controlled value. `0` is treated as "empty" — placeholder is shown. */
+    readonly value: number;
+    readonly onChange: (next: number) => void;
+    /**
+     * Reference price the percentage presets compute against (e.g. mark price).
+     * If `undefined`, presets are rendered disabled.
+     */
+    readonly reference?: number;
+    /** Snap step for committed values. Default `0.01`. */
+    readonly step?: number;
+    /** Cap manual-input precision; defaults to whatever `step` allows. */
+    readonly maxDecimals?: number;
+    /** Small line above the input (e.g. `"Set limit price"`). */
+    readonly label?: string;
+    /** Secondary line below the input (e.g. fiat conversion). */
+    readonly caption?: string;
+    /** Prefix prepended to the readout (e.g. `"$"`). */
+    readonly prefix?: string;
+    /** Suffix appended to the readout (e.g. `" USDC"`). */
+    readonly suffix?: string;
+    /** Placeholder shown when the value is empty/zero. Default `"0.00"`. */
+    readonly placeholder?: string;
+    /** Preset chips. Hidden if empty / undefined. */
+    readonly presets?: readonly LimitPricePreset[];
+    /** Auto-focus the input on mount. Default `false`. */
+    readonly autoFocus?: boolean;
+    /** Disable interaction. */
+    readonly disabled?: boolean;
+};
+/**
+ * Big numeric price input styled like the `CircularDial` readout, with
+ * optional preset chips that bump the value by a percentage of a reference
+ * price (e.g. mark price). Designed for "close at limit" / "edit limit
+ * price" flows where the user enters a target price relative to a market.
+ *
+ * The component is essentially a `CircularDial` variant with the arc /
+ * handle hidden — same label-on-top, value-in-the-middle, presets-below
+ * vertical rhythm and the same Aeonik / Inter type stack.
+ */
+export declare function LimitPriceInput({ value, onChange, reference, step, maxDecimals, label, caption, prefix, suffix, placeholder, presets, autoFocus, disabled, }: LimitPriceInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/LimitPriceInput/index.d.ts

@@ -0,0 +1 @@
+export { LimitPriceInput, type LimitPriceInputProps, type LimitPricePreset } from './LimitPriceInput';

package/dist/src/components/PillToggle/PillToggle.d.ts

@@ -0,0 +1,25 @@
+import { SxProps } from '@mui/material';
+export type PillToggleItem<T extends string | number> = {
+    readonly value: T;
+    readonly label: string;
+};
+export type PillToggleProps<T extends string | number> = {
+    readonly items: readonly PillToggleItem<T>[];
+    readonly value: T;
+    readonly onChange: (value: T) => void;
+    /** 'small' renders a 27px compact toggle (Figma K2-Alpine-Tab-Menu). */
+    readonly size?: 'small';
+    /** 'dark' uses white pill / white text for dark backgrounds. Default is light context. */
+    readonly colorScheme?: 'light' | 'dark';
+    /**
+     * When false, the control sizes to its tabs (e.g. beside another control in a row).
+     * Default `true` fills the container width.
+     */
+    readonly fullWidth?: boolean;
+    readonly sx?: SxProps;
+    /** Merged into each `Tab` (e.g. `fontSize` for larger pill menus). */
+    readonly tabSx?: SxProps;
+    /** Optional E2E hook on the root `Tabs` element. */
+    readonly 'data-testid'?: string;
+};
+export declare function PillToggle<T extends string | number>({ items, value, onChange, size, colorScheme, fullWidth, sx, tabSx, 'data-testid': dataTestId, }: PillToggleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/PillToggle/index.d.ts

@@ -0,0 +1 @@
+export { PillToggle, type PillToggleProps, type PillToggleItem } from './PillToggle';

package/dist/src/components/TabBar/TabBar.d.ts

@@ -4,7 +4,7 @@ export type TabBarItemProps = {
     label: string;
     to?: string;
 } & TabProps;
-export type TabBarProps = TabsProps & {
+export type TabBarProps = Omit<TabsProps, 'size'> & {
     tabBarItems: TabBarItemProps[];
     size?: 'extension';
 };

package/dist/src/index.d.ts

@@ -11,12 +11,17 @@ export { ThemeInvert } from './components/ThemeInvert';
 export * from './theme';
 export * from './components/Icons';
 export { Accordion, type AccordionProps } from './components/Accordion/Accordion';
+export { Banner, type BannerProps, type BannerSeverity, type BannerAction } from './components/Banner/Banner';
+export { CircularDial, type CircularDialProps, type PresetButton } from './components/CircularDial';
+export { LimitPriceInput, type LimitPriceInputProps, type LimitPricePreset } from './components/LimitPriceInput';
 export { AccordionActions, type AccordionActionsProps } from './components/Accordion/AccordionActions';
 export { AccordionDetails, type AccordionDetailsProps } from './components/Accordion/AccordionDetails';
 export { AccordionSummary, type AccordionSummaryProps } from './components/Accordion/AccordionSummary';
 export { Accordions, type AccordionsProps } from './components/Accordion/Accordions';
 export { Avatar as AvatarHex } from './components/Avatar/Avatar';
 export { SquareButton, type SquareButtonProps } from './components/Button/SquareButton';
+export { SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegment, } from './components/Button/SegmentedButton';
+export { PillToggle, type PillToggleProps, type PillToggleItem } from './components/PillToggle';
 export { ContentfulJsonRenderer, type ContentfulJsonRendererProps, } from './components/ContentfulJsonRender/ContentfulJsonRender';
 export { CustomDialog, type CustomDialogProps } from './components/CustomDialog/CustomDialog';
 export { Popover, type PopoverProps } from './components/Popover/Popover';
@@ -31,6 +36,7 @@ export { TruncateText, type TruncateTextProps } from './components/TruncateText/
 export { Typography, type TypographyProps } from './components/Typography/Typography';
 export { truncateAddress, truncateLabel } from './components/TruncateText/TruncateText';
 export { Glow, type GlowProps } from './components/Glow/Glow';
+export { Checklist, type ChecklistProps, type ChecklistItem } from './components/Checklist';
 export { Stepper, type StepperProps } from './components/Stepper/Stepper';
 export { DateTimePicker, type DateTimePickerProps, type UseDayPickerContextProps, } from './components/DateTimePicker';
 export * from './theme/logos';

package/dist/src/theme/theme.d.ts

@@ -302,4 +302,10 @@ declare module '@mui/material/Button' {
         xsmall: true;
     }
 }
+declare module '@mui/material/Tabs' {
+    interface TabsOwnProps {
+        size?: 'small';
+        colorScheme?: 'light' | 'dark';
+    }
+}
 export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@avalabs/k2-alpine",
   "author": "Ava Labs",
   "license": "Limited Ecosystem License",
-  "version": "0.0.0-main-94bbb8c",
+  "version": "0.0.0-main-e579735",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",