vxui-react 1.3.5 → 1.3.7

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

@@ -0,0 +1,72 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ArticleProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+export declare function Article({ children, className, ...props }: ArticleProps): import("react/jsx-runtime").JSX.Element;
+export interface ArticleHeaderProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+export declare function ArticleHeader({ children, className, ...props }: ArticleHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface ArticleTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children?: ReactNode;
+}
+export declare function ArticleTitle({ children, className, ...props }: ArticleTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface ArticleBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export declare function ArticleBody({ children, className, ...props }: ArticleBodyProps): import("react/jsx-runtime").JSX.Element;
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** 章节 id，用于锚点跳转 */
+    sectionId?: string;
+}
+export declare function Section({ children, className, sectionId, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export interface SectionHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    children?: ReactNode;
+    /** 锚点链接，如果提供则显示 # 锚点图标 */
+    anchor?: string;
+}
+export declare function SectionHeading({ children, className, anchor, ...props }: SectionHeadingProps): import("react/jsx-runtime").JSX.Element;
+export interface PagerItem {
+    label: string;
+    onClick: () => void;
+}
+export interface PagerProps {
+    /** 上一页，不提供则隐藏 */
+    prev?: PagerItem;
+    /** 下一页，不提供则隐藏 */
+    next?: PagerItem;
+    className?: string;
+}
+export declare function Pager({ prev, next, className }: PagerProps): import("react/jsx-runtime").JSX.Element | null;
+export interface PropsTableColumn {
+    prop: string;
+    type: string;
+    default?: string;
+    description: string;
+    required?: boolean;
+}
+export interface PropsTableProps {
+    columns: PropsTableColumn[];
+    className?: string;
+}
+export declare function PropsTable({ columns, className }: PropsTableProps): import("react/jsx-runtime").JSX.Element;
+export interface ArticleEmptyStateProps {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+}
+export declare function ArticleEmptyState({ icon, title, description, action, className }: ArticleEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export interface StatItem {
+    label: string;
+    value: string;
+    hint?: string;
+    icon?: ReactNode;
+}
+export interface StatsGridProps {
+    items: StatItem[];
+    className?: string;
+}
+export declare function StatsGrid({ items, className }: StatsGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type DialogPadding = 'none' | 'sm' | 'md' | 'lg';
 export type DialogPlacement = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-half' | 'right-half' | 'bottom-half' | 'left-half';
-export interface DialogProps extends Pick<DialogPrimitive.DialogProps, 'defaultOpen' | 'onOpenChange' | 'open'> {
+export interface DialogProps {
     trigger: ReactNode;
     title: string;
     description?: string;
-    children: ReactNode;
+    children?: ReactNode;
     footer?: ReactNode;
     className?: string;
     /** Dialog width preset. Default: 'md' */
@@ -22,10 +21,29 @@ export interface DialogProps extends Pick<DialogPrimitive.DialogProps, 'defaultO
     closable?: boolean;
     /** When true, the dialog will be displayed in fullscreen mode. Default: false */
     fullscreen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Built-in confirm/cancel buttons — shown when onConfirm is provided (unless footer is also given) */
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmVariant?: 'solid' | 'danger';
+}
+export interface DialogCloseProps {
+    asChild?: boolean;
+    children: ReactNode;
+    onClick?: (e: ReactMouseEvent | ReactKeyboardEvent) => void;
+    className?: string;
+    [key: string]: unknown;
 }
-export declare function Dialog({ trigger, title, description, children, footer, className, size, padding, placement, scrollable, closable, fullscreen, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Wraps any child element so that clicking it closes the parent Dialog.
  * Usage: <DialogClose asChild><Button>Cancel</Button></DialogClose>
  */
-export declare const DialogClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function DialogClose({ asChild, children, onClick, className, ...rest }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ trigger, title, description, children, footer, className, size, padding, placement, scrollable, closable, fullscreen, open: openProp, defaultOpen, onOpenChange, onConfirm, onCancel, confirmLabel, cancelLabel, confirmVariant, }: DialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface SelectOption {
     value: string;
     label: string;
@@ -18,5 +19,11 @@ export interface SelectProps {
     emptyText?: string;
     searchable?: boolean | number;
     className?: string;
+    /**
+     * 自定义移动端选择面板组件。
+     * 默认使用 Sheet 组件。传入 null 可禁用移动端面板。
+     * 可用于注入自定义的 BottomSheet 实现以解耦依赖。
+     */
+    mobileSheet?: ReactNode;
 }
-export declare function Select({ options, value: controlledValue, defaultValue, onChange, placeholder, searchPlaceholder, label, hint, error, disabled, clearable, emptyText, searchable, className, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options, value: controlledValue, defaultValue, onChange, placeholder, searchPlaceholder, label, hint, error, disabled, clearable, emptyText, searchable, className, mobileSheet, }: SelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { SheetActionItem, SheetSide } from './SheetPanel';
+export type { SheetSide } from './SheetPanel';
+export type { SheetActionItemProps } from './SheetPanel';
+export type SheetVariant = 'default' | 'action';
+export interface SheetProps {
+    trigger?: ReactNode;
+    children: ReactNode;
+    side?: SheetSide;
+    variant?: SheetVariant;
+    title?: ReactNode;
+    description?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    showClose?: boolean;
+    closeOnOverlayClick?: boolean;
+    showConfirm?: boolean;
+    confirmText?: string;
+    confirmDisabled?: boolean;
+    onConfirm?: () => void;
+    className?: string;
+    width?: number;
+}
+export declare function Sheet({ trigger, title, description, side, variant, children, header, footer, className, open: openProp, defaultOpen, onOpenChange, showClose, closeOnOverlayClick, showConfirm, confirmText, confirmDisabled, onConfirm, width, }: SheetProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Sheet {
+    var Item: typeof SheetActionItem;
+}

package/dist/src/components/Sheet/SheetPanel.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+import { SheetPhase } from './useSheetState';
+export type SheetSide = 'left' | 'right' | 'top' | 'bottom';
+export interface SheetPanelProps {
+    side: SheetSide;
+    phase: SheetPhase;
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    showClose?: boolean;
+    showConfirm?: boolean;
+    confirmText?: string;
+    confirmDisabled?: boolean;
+    onConfirm?: () => void;
+    onClose: () => void;
+    /** 点击遮罩层关闭 */
+    closeOnOverlayClick?: boolean;
+    /** action 变体：使用操作列表样式（无关闭按钮、无确认按钮） */
+    action?: boolean;
+    /** 抽屉宽度（仅 left/right 有效） */
+    width?: number;
+}
+/**
+ * 统一的 Sheet 面板组件
+ *
+ * 同时处理桌面端和移动端的所有方向：
+ * - left/right：侧边滑入面板
+ * - top/bottom：顶部/底部滑入面板
+ * - action：底部操作列表（无关闭/确认按钮）
+ *
+ * 行为统一：
+ * - 只能通过关闭按钮或确认按钮关闭，不能点击遮罩
+ * - 统一的打开/关闭 animation
+ * - 统一的确认按钮
+ */
+export declare function SheetPanel({ side, phase, title, description, children, header, footer, className, showClose, showConfirm, confirmText, confirmDisabled, onConfirm, onClose, closeOnOverlayClick, action, width, }: SheetPanelProps): import('react').ReactPortal | null;
+export interface SheetActionItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: ReactNode;
+    destructive?: boolean;
+}
+export declare function SheetActionItem({ icon, destructive, className, children, ...props }: SheetActionItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet';
+export type { SheetProps, SheetSide, SheetVariant, SheetActionItemProps } from './Sheet';

package/dist/src/components/Sheet/useSheetState.d.ts

@@ -0,0 +1,34 @@
+export type SheetPhase = 'hidden' | 'visible' | 'exiting';
+export interface UseSheetStateProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface UseSheetStateReturn {
+    /** 当前是否在视觉上可见 */
+    isVisible: boolean;
+    /** 当前动画阶段 */
+    phase: SheetPhase;
+    /** 打开 */
+    open: () => void;
+    /** 关闭（启动退出动画） */
+    close: () => void;
+    /** dialog 状态：是否逻辑上已打开 */
+    isOpen: boolean;
+}
+/**
+ * Sheet 状态管理 hook
+ *
+ * 三阶段：hidden → visible → exiting → hidden
+ *
+ * - visible: 组件可见，入场 animation 已在挂载时自动播放完毕
+ * - exiting: 用户触发关闭，CSS animation 播放退场动画
+ * - hidden: 退场动画完成，组件卸载
+ *
+ * 关闭流程统一由 isOpen 驱动：
+ *   close() → dialogClose() → isOpen=false → useEffect → setPhase('exiting')
+ *   → setTimeout → setPhase('hidden')
+ *
+ * 避免重复触发：使用 ref 标记是否正在退出，防止 isOpen 变化重复触发。
+ */
+export declare function useSheetState(props: UseSheetStateProps): UseSheetStateReturn;

package/dist/src/components/mobile/BottomSheet.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export interface BottomSheetProps {
+    /** 是否打开（上层只能设为 true 来打开，关闭由 BottomSheet 自主控制） */
+    open: boolean;
+    /** 当 BottomSheet 完成关闭动画后的回调（用于上层清理 open 状态） */
+    onClose?: () => void;
+    /** 标题 */
+    title?: ReactNode;
+    /** 描述 */
+    description?: ReactNode;
+    /** 是否显示拖动把手，默认 true */
+    draggable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 内容区域 */
+    children: ReactNode;
+    /** 是否在 Dialog 内渲染到 dialogContent 中，默认 false */
+    inlineInDialog?: boolean;
+    /** 是否显示确认按钮，默认 false */
+    showConfirm?: boolean;
+    /** 确认按钮文字，默认 "确认" */
+    confirmText?: string;
+    /** 确认按钮是否禁用 */
+    confirmDisabled?: boolean;
+    /** 用户点击确认按钮的回调 */
+    onConfirm?: () => void;
+}
+export declare function BottomSheet({ open, onClose, title, description, draggable, className, children, inlineInDialog, showConfirm, confirmText, confirmDisabled, onConfirm, }: BottomSheetProps): import('react').ReactPortal | null;

package/dist/src/lib/VXUIProvider.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { ThemeRegistry } from '../components/ThemeProvider';
+export interface VXUIProviderProps {
+    children: ReactNode;
+    /**
+     * 主题配置，传递给 ThemeProvider。
+     * 包含预设主题和自定义主题。
+     */
+    themes?: ThemeRegistry;
+    /** 默认主题名称 */
+    defaultTheme?: string;
+    /** localStorage 存储键名 */
+    storageKey?: string;
+}
+/**
+ * 组合 Provider，一次性挂载 ThemeProvider、ViewportProvider、ToastProvider。
+ *
+ * 等价于：
+ * ```tsx
+ * <ThemeProvider themes={themes} defaultTheme={defaultTheme}>
+ *   <ViewportProvider>
+ *     <ToastProvider>
+ *       {children}
+ *     </ToastProvider>
+ *   </ViewportProvider>
+ * </ThemeProvider>
+ * ```
+ */
+export declare function VXUIProvider({ children, themes, defaultTheme, storageKey, }: VXUIProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/breakpoints.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Unified breakpoint constants shared between JS and CSS.
+ *
+ * ── 断点系统说明 ─────────────────────────────────────────────
+ *
+ * 本系统有两套断点，用途不同，请勿混淆：
+ *
+ * 1. CSS 布局断点 (CSS Media Query Breakpoints)
+ *    ──────────────────────────────────────────
+ *    用于控制页面布局在不同视口宽度下的表现。
+ *    sm: 640px  — 手机布局断点
+ *    md: 768px  — 平板布局断点
+ *    lg: 1000px — 桌面布局断点
+ *
+ *    这些值必须与 CSS 变量保持一致：
+ *      --vx-breakpoint-sm: 640px
+ *      --vx-breakpoint-md: 768px
+ *      --vx-breakpoint-lg: 1000px
+ *
+ * 2. 设备检测断点 (Device Detection Breakpoints)
+ *    ──────────────────────────────────────────
+ *    用于 JS 端判断设备类型（phone / tablet / desktop）。
+ *    基于物理屏幕尺寸（window.screen.width），而非视口宽度。
+ *    PHONE_MAX_WIDTH = 1000
+ *
+ *    为什么设备检测使用 1000px 而不是 640px？
+ *    - 物理屏幕宽度 ≤ 1000px 的设备可能是手机或平板
+ *    - 物理屏幕宽度 > 1000px 的肯定是桌面显示器
+ *    - 手机和平板的区分通过宽高比（aspect ratio）实现
+ *    - 这样可以避免桌面浏览器窗口缩小时被误判为手机
+ *
+ * 3. 为什么 CSS 布局断点用 640px 而设备检测用 1000px？
+ *    ──────────────────────────────────────────
+ *    CSS 媒体查询基于视口宽度（viewport width），
+ *    而设备检测基于物理屏幕宽度（screen.width）。
+ *    两者是不同的概念：
+ *    - 一个 1024px 物理宽度的平板，在分屏模式下视口可能只有 512px
+ *    - CSS 需要在视口 640px 时就切换到手机布局
+ *    - 但设备检测仍应识别为平板（物理宽度 > 640px）
+ *
+ *    因此这两套断点值不同是合理的，不需要强行统一。
+ *    关键是要在代码中明确区分它们的用途。
+ *
+ * ─────────────────────────────────────────────────────────────
+ */
+export declare const BREAKPOINTS: {
+    /** CSS 布局断点 - 手机布局 (max-width: 640px) */
+    readonly sm: 640;
+    /** CSS 布局断点 - 平板布局 (max-width: 768px) */
+    readonly md: 768;
+    /** CSS 布局断点 - 桌面布局 (min-width: 1000px) */
+    readonly lg: 1000;
+};
+/**
+ * 设备检测 - 物理屏幕宽度阈值。
+ * 物理宽度 ≤ PHONE_MAX_WIDTH 的设备可能是手机或平板，
+ * 具体通过宽高比进一步区分。
+ */
+export declare const PHONE_MAX_WIDTH: 1000;
+/** 宽高比阈值：低于此值判定为手机（窄屏设备） */
+export declare const PHONE_ASPECT_RATIO_THRESHOLD = 0.7;
+/** 宽高比阈值：低于此值且宽度 ≤ PHONE_MAX_WIDTH 判定为手机 */
+export declare const TABLET_ASPECT_RATIO_THRESHOLD = 0.75;

package/dist/src/lib/dialogPopover.d.ts

@@ -1,4 +1,30 @@
+/**
+ * DialogContentContext — 允许 Dialog 组件将 content ref 传递给子组件，
+ * 替代通过 CSS 类名选择器查找 DOM 节点的脆弱方式。
+ *
+ * Select、MultiSelect、DatePicker 等组件通过此 context 获取 dialog content
+ * 元素，将 dropdown 面板 portal 到 dialog 内部以避免 z-index 裁剪问题。
+ */
+export declare const DialogContentContext: import('react').Context<HTMLElement | null>;
+/**
+ * 获取 dialog content 元素引用。
+ * 优先使用 React Context，回退到 DOM 选择器方式以保持向后兼容。
+ */
+export declare function getDialogContent(node: HTMLElement | null): HTMLElement | null;
+/**
+ * Determine if a popover/dropdown should be rendered inline or portaled.
+ *
+ * On mobile, dropdowns use BottomSheet component which always portals to body,
+ * so shouldInline is always false. On desktop, dropdowns use fixed-position
+ * popovers that should be portaled into the dialog content if inside a dialog
+ * to avoid z-index clipping issues.
+ */
 export declare function getDialogPopoverContext(node: HTMLElement | null): {
     dialogContent: HTMLElement | null;
     shouldInline: boolean;
 };
+/**
+ * Hook for components that need to portal their dropdown into a dialog.
+ * Prefer this over getDialogPopoverContext for new code.
+ */
+export declare function useDialogContentRef(): HTMLElement | null;

package/dist/src/lib/index.d.ts

@@ -1,7 +1,10 @@
-export { ViewportProvider, useViewport } from './viewport';
+export { BREAKPOINTS, PHONE_MAX_WIDTH, PHONE_ASPECT_RATIO_THRESHOLD, TABLET_ASPECT_RATIO_THRESHOLD } from './breakpoints';
 export type { ViewportType, ViewportContextValue, ViewportProviderProps } from './viewport';
+export { ViewportProvider, useViewport } from './viewport';
 export { Responsive } from '../components/Responsive';
 export type { ResponsiveProps } from '../components/Responsive';
+export { VXUIProvider } from './VXUIProvider';
+export type { VXUIProviderProps } from './VXUIProvider';
 export { AppShell } from '../components/AppShell';
 export type { AppShellProps, AppShellNavItem, AppShellNavSection } from '../components/AppShell';
 export { Shell, ShellSidebar, ShellNav, ShellNavSection, ShellNavItem, ShellOverlay, ShellMain, ShellTopbar, ShellContent, } from '../components/Shell';
@@ -63,18 +66,12 @@ export { MobileShell, MobileTopBar, MobileIconButton } from '../components/mobil
 export type { MobileShellProps, MobileTopBarProps, MobileIconButtonProps } from '../components/mobile/MobileShell';
 export { BottomNav } from '../components/mobile/BottomNav';
 export type { BottomNavProps, BottomNavItem } from '../components/mobile/BottomNav';
-export { ActionSheet, ActionSheetItem } from '../components/mobile/ActionSheet';
-export type { ActionSheetProps, ActionSheetItemProps } from '../components/mobile/ActionSheet';
 export { MobileList, MobileListSection, MobileListItem } from '../components/mobile/MobileList';
 export type { MobileListSectionProps, MobileListItemProps } from '../components/mobile/MobileList';
-export { MobileDrawer, DrawerNavItem, DrawerNavSection } from '../components/mobile/MobileDrawer';
-export type { MobileDrawerProps, DrawerNavItemProps, DrawerNavSectionProps } from '../components/mobile/MobileDrawer';
 export { Label } from '../components/Label';
 export type { LabelProps } from '../components/Label';
 export { Form, FormField, FormLabel, FormDescription, FormMessage, useFormField } from '../components/Form';
 export type { FormProps, FormFieldProps, FormLabelProps, FormDescriptionProps, FormMessageProps } from '../components/Form';
-export { AlertDialog } from '../components/AlertDialog';
-export type { AlertDialogProps } from '../components/AlertDialog';
 export { NumberInput } from '../components/NumberInput';
 export type { NumberInputProps } from '../components/NumberInput';
 export { Calendar } from '../components/Calendar';
@@ -88,7 +85,23 @@ export type { TimePickerProps } from '../components/TimePicker';
 export { FileUpload } from '../components/FileUpload';
 export type { FileUploadProps, UploadedFile } from '../components/FileUpload';
 export { Sheet } from '../components/Sheet';
-export type { SheetProps, SheetSide } from '../components/Sheet';
+export type { SheetProps, SheetSide, SheetVariant, SheetActionItemProps } from '../components/Sheet';
+/**
+ * @deprecated 使用统一的 Sheet 组件替代。
+ * ActionSheet 将在下一个 major 版本中移除，请迁移到 Sheet 组件：
+ *   <Sheet variant="action" side="bottom">
+ * @see {@link Sheet} 统一 Sheet 组件
+ */
+export { ActionSheet, ActionSheetItem } from '../components/mobile/ActionSheet';
+export type { ActionSheetProps, ActionSheetItemProps } from '../components/mobile/ActionSheet';
+/**
+ * @deprecated 使用统一的 Sheet 组件替代。
+ * MobileDrawer 将在下一个 major 版本中移除，请迁移到 Sheet 组件：
+ *   <Sheet side="left">
+ * @see {@link Sheet} 统一 Sheet 组件
+ */
+export { MobileDrawer, DrawerNavItem, DrawerNavSection } from '../components/mobile/MobileDrawer';
+export type { MobileDrawerProps, DrawerNavItemProps, DrawerNavSectionProps } from '../components/mobile/MobileDrawer';
 export { ScrollArea } from '../components/ScrollArea';
 export type { ScrollAreaProps } from '../components/ScrollArea';
 export { Toggle, ToggleGroup } from '../components/Toggle';
@@ -125,3 +138,5 @@ export { CodeBlock } from '../components/CodeBlock';
 export type { CodeBlockProps, CodeBlockLanguage } from '../components/CodeBlock';
 export { LanguageSwitcher } from '../components/LanguageSwitcher';
 export type { LanguageSwitcherProps } from '../components/LanguageSwitcher';
+export { Article, ArticleHeader, ArticleTitle, ArticleBody, Section, SectionHeading, Pager, PropsTable, ArticleEmptyState, StatsGrid, } from '../components/Article';
+export type { ArticleProps, ArticleHeaderProps, ArticleTitleProps, ArticleBodyProps, SectionProps, SectionHeadingProps, PagerProps, PagerItem, PropsTableProps, PropsTableColumn, ArticleEmptyStateProps, StatsGridProps, StatItem, } from '../components/Article';

package/dist/src/lib/viewport.d.ts

@@ -7,6 +7,12 @@ export interface ViewportContextValue {
     /** True when the device is in the tablet width range AND screen orientation is portrait */
     isTabletPortrait: boolean;
     isDesktop: boolean;
+    /** The actual screen width in CSS pixels */
+    screenWidth: number;
+    /** The actual screen height in CSS pixels */
+    screenHeight: number;
+    /** Aspect ratio: width / height (0-1 for portrait, >1 for landscape) */
+    aspectRatio: number;
 }
 export interface ViewportProviderProps {
     children: ReactNode;