@loafmarkets/ui 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -192,41 +192,88 @@ interface PropertyNewsUpdatesProps extends React.HTMLAttributes<HTMLDivElement>
 }
 declare const PropertyNewsUpdates: React.ForwardRefExoticComponent<PropertyNewsUpdatesProps & React.RefAttributes<HTMLDivElement>>;
 
-type PropertyAddressOption = {
+type RangeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
+interface TradingSliderProps extends RangeInputProps {
+    /**
+     * Controlled slider value
+     */
+    value?: number;
+    /**
+     * Initial value for the uncontrolled mode
+     */
+    defaultValue?: number;
+    /**
+     * Fires whenever the thumb value changes
+     */
+    onValueChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label displayed on top of the slider card
+     */
+    label?: string;
+    /**
+     * Small helper copy rendered under the label
+     */
+    helperText?: string;
+    /**
+     * Custom formatter for the highlighted value on the right
+     */
+    formatValue?: (value: number) => React.ReactNode;
+    /**
+     * Text shown next to the minimum tick
+     */
+    minLabel?: string;
+    /**
+     * Text shown next to the maximum tick
+     */
+    maxLabel?: string;
+    /**
+     * Accent color used for the filled portion of the track
+     */
+    accentColor?: string;
+}
+declare const TradingSlider: React.ForwardRefExoticComponent<TradingSliderProps & React.RefAttributes<HTMLInputElement>>;
+
+type MobileTradeNavItem = {
     id: string;
     label: string;
+    icon?: React.ReactNode;
 };
-type PropertyValueSummary = {
-    value: number;
-    change?: number;
-    label?: string;
-    currencySymbol?: string;
-    formatOptions?: Intl.NumberFormatOptions;
+type MobileTradeNavProps = React.HTMLAttributes<HTMLDivElement> & {
+    items: MobileTradeNavItem[];
+    activeId: string;
+    onChange?: (itemId: string) => void;
 };
-type PropertyPriceSummary = {
-    value: number;
-    change?: number;
-    changePercent?: number;
-    currencySymbol?: string;
-    formatOptions?: Intl.NumberFormatOptions;
-    percentFormatOptions?: Intl.NumberFormatOptions;
+declare const MobileTradeNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    items: MobileTradeNavItem[];
+    activeId: string;
+    onChange?: (itemId: string) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+
+type TradeConfirmationModalDetails = {
+    type: 'buy' | 'sell';
+    orderType: 'market' | 'limit';
+    quantity: number;
+    price?: number | null;
+    totalValue?: number | null;
+    tokenSymbol: string;
+    willExecuteImmediately?: boolean;
 };
-type PropertyCompareBarProps = React.HTMLAttributes<HTMLDivElement> & {
-    addresses: (PropertyAddressOption | string)[];
-    selectedAddressId?: string;
-    onSelectAddress?: (addressId: string) => void;
-    propertyValue?: PropertyValueSummary;
-    propertyValueVariant?: "classic" | "card" | "pill";
-    price?: PropertyPriceSummary;
+type TradeConfirmationModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    orderDetails?: TradeConfirmationModalDetails | null;
+    className?: string;
+    estimatedFeeUsd?: number | null;
+    estimatedFeeBps?: number | null;
+    totalWithFeesUsd?: number | null;
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
+    rememberChoiceChecked?: boolean;
+    rememberChoiceLabel?: string;
+    onRememberChoiceChange?: (checked: boolean) => void;
 };
-declare const PropertyCompareBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    addresses: (PropertyAddressOption | string)[];
-    selectedAddressId?: string;
-    onSelectAddress?: (addressId: string) => void;
-    propertyValue?: PropertyValueSummary;
-    propertyValueVariant?: "classic" | "card" | "pill";
-    price?: PropertyPriceSummary;
-} & React.RefAttributes<HTMLDivElement>>;
+declare function TradeConfirmationModal({ isOpen, onClose, onConfirm, orderDetails, className, estimatedFeeUsd: _estimatedFeeUsd, estimatedFeeBps: _estimatedFeeBps, totalWithFeesUsd, confirmDisabled, confirmLoading, rememberChoiceChecked, rememberChoiceLabel, onRememberChoiceChange, }: TradeConfirmationModalProps): React.ReactElement | null;
 
 interface LoafLiquidityBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     isGlowing?: boolean;
@@ -262,6 +309,19 @@ type YourOrdersTab = {
     orders: YourOrder[];
     emptyState?: string;
     enableCancel?: boolean;
+    columnVisibility?: {
+        propertyPercent?: boolean;
+        pnl?: boolean;
+    };
+};
+type RenderTabContentArgs = {
+    tab: YourOrdersTab;
+    orders: YourOrder[];
+    page: number;
+    totalPages: number;
+    totalOrders: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
 };
 type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -270,6 +330,7 @@ type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
     activeTabId?: string;
     onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
+    renderTabContent?: (args: RenderTabContentArgs) => React.ReactNode | null;
 };
 declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -278,6 +339,7 @@ declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     activeTabId?: string;
     onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
+    renderTabContent?: (args: RenderTabContentArgs) => React.ReactNode | null;
 } & React.RefAttributes<HTMLDivElement>>;
 
 type PriceChartRange = "30s" | "1m" | "5m" | "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
@@ -367,20 +429,4 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-type MobileTradeNavItem = {
-    id: string;
-    label: string;
-    icon?: React.ReactNode;
-};
-type MobileTradeNavProps = React.HTMLAttributes<HTMLDivElement> & {
-    items: MobileTradeNavItem[];
-    activeId: string;
-    onChange?: (itemId: string) => void;
-};
-declare const MobileTradeNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    items: MobileTradeNavItem[];
-    activeId: string;
-    onChange?: (itemId: string) => void;
-} & React.RefAttributes<HTMLDivElement>>;
-
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyCompareBar, type PropertyCompareBarProps, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.d.ts

@@ -192,41 +192,88 @@ interface PropertyNewsUpdatesProps extends React.HTMLAttributes<HTMLDivElement>
 }
 declare const PropertyNewsUpdates: React.ForwardRefExoticComponent<PropertyNewsUpdatesProps & React.RefAttributes<HTMLDivElement>>;
 
-type PropertyAddressOption = {
+type RangeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
+interface TradingSliderProps extends RangeInputProps {
+    /**
+     * Controlled slider value
+     */
+    value?: number;
+    /**
+     * Initial value for the uncontrolled mode
+     */
+    defaultValue?: number;
+    /**
+     * Fires whenever the thumb value changes
+     */
+    onValueChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label displayed on top of the slider card
+     */
+    label?: string;
+    /**
+     * Small helper copy rendered under the label
+     */
+    helperText?: string;
+    /**
+     * Custom formatter for the highlighted value on the right
+     */
+    formatValue?: (value: number) => React.ReactNode;
+    /**
+     * Text shown next to the minimum tick
+     */
+    minLabel?: string;
+    /**
+     * Text shown next to the maximum tick
+     */
+    maxLabel?: string;
+    /**
+     * Accent color used for the filled portion of the track
+     */
+    accentColor?: string;
+}
+declare const TradingSlider: React.ForwardRefExoticComponent<TradingSliderProps & React.RefAttributes<HTMLInputElement>>;
+
+type MobileTradeNavItem = {
     id: string;
     label: string;
+    icon?: React.ReactNode;
 };
-type PropertyValueSummary = {
-    value: number;
-    change?: number;
-    label?: string;
-    currencySymbol?: string;
-    formatOptions?: Intl.NumberFormatOptions;
+type MobileTradeNavProps = React.HTMLAttributes<HTMLDivElement> & {
+    items: MobileTradeNavItem[];
+    activeId: string;
+    onChange?: (itemId: string) => void;
 };
-type PropertyPriceSummary = {
-    value: number;
-    change?: number;
-    changePercent?: number;
-    currencySymbol?: string;
-    formatOptions?: Intl.NumberFormatOptions;
-    percentFormatOptions?: Intl.NumberFormatOptions;
+declare const MobileTradeNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    items: MobileTradeNavItem[];
+    activeId: string;
+    onChange?: (itemId: string) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+
+type TradeConfirmationModalDetails = {
+    type: 'buy' | 'sell';
+    orderType: 'market' | 'limit';
+    quantity: number;
+    price?: number | null;
+    totalValue?: number | null;
+    tokenSymbol: string;
+    willExecuteImmediately?: boolean;
 };
-type PropertyCompareBarProps = React.HTMLAttributes<HTMLDivElement> & {
-    addresses: (PropertyAddressOption | string)[];
-    selectedAddressId?: string;
-    onSelectAddress?: (addressId: string) => void;
-    propertyValue?: PropertyValueSummary;
-    propertyValueVariant?: "classic" | "card" | "pill";
-    price?: PropertyPriceSummary;
+type TradeConfirmationModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    orderDetails?: TradeConfirmationModalDetails | null;
+    className?: string;
+    estimatedFeeUsd?: number | null;
+    estimatedFeeBps?: number | null;
+    totalWithFeesUsd?: number | null;
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
+    rememberChoiceChecked?: boolean;
+    rememberChoiceLabel?: string;
+    onRememberChoiceChange?: (checked: boolean) => void;
 };
-declare const PropertyCompareBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    addresses: (PropertyAddressOption | string)[];
-    selectedAddressId?: string;
-    onSelectAddress?: (addressId: string) => void;
-    propertyValue?: PropertyValueSummary;
-    propertyValueVariant?: "classic" | "card" | "pill";
-    price?: PropertyPriceSummary;
-} & React.RefAttributes<HTMLDivElement>>;
+declare function TradeConfirmationModal({ isOpen, onClose, onConfirm, orderDetails, className, estimatedFeeUsd: _estimatedFeeUsd, estimatedFeeBps: _estimatedFeeBps, totalWithFeesUsd, confirmDisabled, confirmLoading, rememberChoiceChecked, rememberChoiceLabel, onRememberChoiceChange, }: TradeConfirmationModalProps): React.ReactElement | null;
 
 interface LoafLiquidityBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     isGlowing?: boolean;
@@ -262,6 +309,19 @@ type YourOrdersTab = {
     orders: YourOrder[];
     emptyState?: string;
     enableCancel?: boolean;
+    columnVisibility?: {
+        propertyPercent?: boolean;
+        pnl?: boolean;
+    };
+};
+type RenderTabContentArgs = {
+    tab: YourOrdersTab;
+    orders: YourOrder[];
+    page: number;
+    totalPages: number;
+    totalOrders: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
 };
 type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -270,6 +330,7 @@ type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
     activeTabId?: string;
     onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
+    renderTabContent?: (args: RenderTabContentArgs) => React.ReactNode | null;
 };
 declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -278,6 +339,7 @@ declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     activeTabId?: string;
     onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
+    renderTabContent?: (args: RenderTabContentArgs) => React.ReactNode | null;
 } & React.RefAttributes<HTMLDivElement>>;
 
 type PriceChartRange = "30s" | "1m" | "5m" | "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
@@ -367,20 +429,4 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-type MobileTradeNavItem = {
-    id: string;
-    label: string;
-    icon?: React.ReactNode;
-};
-type MobileTradeNavProps = React.HTMLAttributes<HTMLDivElement> & {
-    items: MobileTradeNavItem[];
-    activeId: string;
-    onChange?: (itemId: string) => void;
-};
-declare const MobileTradeNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    items: MobileTradeNavItem[];
-    activeId: string;
-    onChange?: (itemId: string) => void;
-} & React.RefAttributes<HTMLDivElement>>;
-
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyCompareBar, type PropertyCompareBarProps, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };