@versaur/react 0.0.1 → 1.0.1

package/dist/primitive.d.ts

@@ -0,0 +1,574 @@
+import { Avatar as Avatar_2 } from '@versaur/core/primitive';
+import { AvatarShape } from '@versaur/core/primitive';
+import { AvatarSize } from '@versaur/core/primitive';
+import { AvatarVariant } from '@versaur/core/primitive';
+import { Badge as Badge_2 } from '@versaur/core/primitive';
+import { BadgeShape } from '@versaur/core/primitive';
+import { BadgeSize } from '@versaur/core/primitive';
+import { BadgeVariant } from '@versaur/core/primitive';
+import { Button as Button_2 } from '@versaur/core/primitive';
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonSize } from '@versaur/core/primitive';
+import { ButtonVariant } from '@versaur/core/primitive';
+import { ComponentType } from 'react';
+import { default as default_2 } from 'react';
+import { Dot as Dot_2 } from '@versaur/core/primitive';
+import { DotSize } from '@versaur/core/primitive';
+import { DotVariant } from '@versaur/core/primitive';
+import { ForwardRefExoticComponent } from 'react';
+import { Heading as Heading_2 } from '@versaur/core/primitive';
+import { HeadingAs } from '@versaur/core/primitive';
+import { HeadingIntent } from '@versaur/core/primitive';
+import { HeadingSize } from '@versaur/core/primitive';
+import { HeadingWeight } from '@versaur/core/primitive';
+import { Hr as Hr_2 } from '@versaur/core/primitive';
+import { HrOrientation } from '@versaur/core/primitive';
+import { HrSize } from '@versaur/core/primitive';
+import { HrSpacing } from '@versaur/core/primitive';
+import { HrVariant } from '@versaur/core/primitive';
+import { HTMLAttributes } from 'react';
+import { Icon as Icon_2 } from '@versaur/core/primitive';
+import { IconIntent } from '@versaur/core/primitive';
+import { IconSize } from '@versaur/core/primitive';
+import { ImgHTMLAttributes } from 'react';
+import { Kbd as Kbd_2 } from '@versaur/core/primitive';
+import { Loader as Loader_2 } from '@versaur/core/primitive';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SVGProps } from 'react';
+import { Text as Text_3 } from '@versaur/core/primitive';
+import { TextAs } from '@versaur/core/primitive';
+import { TextIntent } from '@versaur/core/primitive';
+import { TextSize } from '@versaur/core/primitive';
+import { TextWeight } from '@versaur/core/primitive';
+
+export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLSpanElement>> & {
+    Image: ForwardRefExoticComponent<AvatarImageProps & RefAttributes<HTMLImageElement>>;
+};
+
+declare interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for the image
+     */
+    alt: string;
+}
+
+export declare interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual variant of the avatar
+     * @default 'primary'
+     */
+    variant?: Avatar_2.Variant;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size?: Avatar_2.Size;
+    /**
+     * Shape of the avatar
+     * @default 'circle'
+     */
+    shape?: Avatar_2.Shape;
+    /**
+     * Avatar content (text initials or compound Avatar.Image)
+     */
+    children?: ReactNode;
+}
+
+export { AvatarShape }
+
+export { AvatarSize }
+
+export { AvatarVariant }
+
+/**
+ * Badge component for displaying labels, tags, or status indicators
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="primary">New</Badge>
+ *
+ * <Badge variant="success" size="small" shape="pill">
+ *   Active
+ * </Badge>
+ *
+ * <Badge variant="danger">Critical</Badge>
+ * ```
+ */
+export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual style variant
+     * @default 'primary'
+     */
+    variant?: Badge_2.Variant;
+    /**
+     * Size of the badge
+     * @default 'medium'
+     */
+    size?: Badge_2.Size;
+    /**
+     * Shape of the badge
+     * @default 'rounded'
+     */
+    shape?: Badge_2.Shape;
+    /**
+     * Icon to display on the left side of the badge
+     */
+    iconLeft?: ReactNode;
+    /**
+     * Icon to display on the right side of the badge
+     */
+    iconRight?: ReactNode;
+    /**
+     * Maximum width of the badge. Text will truncate with ellipsis if exceeded.
+     */
+    maxWidth?: string | number;
+    /**
+     * Badge content (text, icons, etc.)
+     */
+    children?: React.ReactNode;
+}
+
+export { BadgeShape }
+
+export { BadgeSize }
+
+export { BadgeVariant }
+
+/**
+ * Button component with data-attribute state machine pattern
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="medium">
+ *   Click me
+ * </Button>
+ *
+ * <Button variant="ghost" size="small" loading>
+ *   Loading...
+ * </Button>
+ * ```
+ */
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * ButtonIcon component - an icon-only button with full Button styling
+ *
+ * Requires aria-label for accessibility since there's no text content.
+ *
+ * @example
+ * ```tsx
+ * import { ButtonIcon } from '@versaur/react';
+ * import { StarIcon } from '@versaur/icons';
+ *
+ * <ButtonIcon as={StarIcon} aria-label="Add to favorites" variant="primary" />
+ * ```
+ */
+export declare const ButtonIcon: ForwardRefExoticComponent<ButtonIconProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * ButtonIconProps combines Button props (without children) and Icon props
+ * @property as - The SVG icon component to render (required)
+ * @property ariaLabel - Accessible label for the icon button (required)
+ * @property iconProps - Additional props to pass to the icon
+ */
+export declare interface ButtonIconProps extends Omit<ButtonProps, "children"> {
+    /**
+     * The SVG icon component to render
+     * @required
+     */
+    as: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * Accessible label for the icon button
+     * Required for screen readers since there's no text content
+     * @required
+     */
+    "aria-label": string;
+    /**
+     * Additional props to pass to the icon
+     */
+    iconProps?: SVGProps<SVGSVGElement>;
+}
+
+export declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    /**
+     * Visual variant of the button
+     * @default 'primary'
+     */
+    variant?: Button_2.Variant;
+    /**
+     * Size of the button
+     * @default 'medium'
+     */
+    size?: Button_2.Size;
+    /**
+     * Whether the button is in a loading state
+     * Shows a spinner and disables interaction
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in a pressed state (for toggle buttons)
+     * @default false
+     */
+    pressed?: boolean;
+    /**
+     * Icon to display on the left side of the button
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icon to display on the right side of the button
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Button content
+     */
+    children: ReactNode;
+}
+
+export { ButtonSize }
+
+export { ButtonVariant }
+
+/**
+ * Dot component for status indicators and visual markers
+ *
+ * @example
+ * ```tsx
+ * <Dot variant="success" />
+ * <Dot variant="danger" size="small" />
+ * <Dot aria-label="Active status" />
+ * ```
+ */
+export declare const Dot: ForwardRefExoticComponent<DotProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface DotProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual style variant
+     * @default 'primary'
+     */
+    variant?: Dot_2.Variant;
+    /**
+     * Size of the dot
+     * @default 'medium'
+     */
+    size?: Dot_2.Size;
+}
+
+export { DotSize }
+
+export { DotVariant }
+
+export declare const Heading: ForwardRefExoticComponent<HeadingProps & RefAttributes<HTMLHeadingElement>>;
+
+export { HeadingAs }
+
+export { HeadingIntent }
+
+export declare interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The heading level to render
+     * @default 'h2'
+     */
+    as?: Heading_2.As;
+    /**
+     * Override the preset font-size
+     */
+    size?: Heading_2.Size;
+    /**
+     * Override the preset font-weight
+     */
+    weight?: Heading_2.Weight;
+    /**
+     * Text color intent
+     */
+    intent?: Heading_2.Intent;
+    /**
+     * Text transform case
+     */
+    case?: Heading_2.Case;
+    /**
+     * Text decoration transform
+     */
+    transform?: Heading_2.Transform;
+    /**
+     * Heading content
+     */
+    children: ReactNode;
+}
+
+export { HeadingSize }
+
+export { HeadingWeight }
+
+/**
+ * Hr component — a divider for visually separating content sections
+ *
+ * @example
+ * ```tsx
+ * <Hr />
+ *
+ * <Hr variant="dashed" size="md" spacing="lg" />
+ *
+ * <Hr orientation="vertical" />
+ * ```
+ */
+export declare const Hr: ForwardRefExoticComponent<HrProps & RefAttributes<HTMLHRElement>>;
+
+export { HrOrientation }
+
+export declare interface HrProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * Orientation of the divider
+     * @default 'horizontal'
+     */
+    orientation?: Hr_2.Orientation;
+    /**
+     * Visual variant (border style) of the divider
+     * @default 'solid'
+     */
+    variant?: Hr_2.Variant;
+    /**
+     * Thickness of the divider line
+     * @default 'sm'
+     */
+    size?: Hr_2.Size;
+    /**
+     * Spacing (margin) around the divider
+     * @default 'md'
+     */
+    spacing?: Hr_2.Spacing;
+}
+
+export { HrSize }
+
+export { HrSpacing }
+
+export { HrVariant }
+
+export declare const Icon: default_2.ForwardRefExoticComponent<Omit<default_2.SVGProps<SVGSVGElement>, "ref"> & {
+    as: default_2.ComponentType<default_2.SVGProps<SVGSVGElement>>;
+    intent?: Icon_2.Intent | "inherit";
+    size?: Icon_2.Size | "inherit";
+} & default_2.RefAttributes<SVGSVGElement>>;
+
+export { IconIntent }
+
+export declare type IconProps = Omit<SVGProps<SVGSVGElement>, "ref"> & {
+    as: ComponentType<SVGProps<SVGSVGElement>>;
+    intent?: Icon_2.Intent | "inherit";
+    size?: Icon_2.Size | "inherit";
+};
+
+export { IconSize }
+
+/**
+ * Kbd - Semantic keyboard key component
+ * Renders as <kbd> element with support for filled and outline variants
+ *
+ * @example
+ * ```tsx
+ * <Kbd variant="filled">Ctrl</Kbd>
+ * <Kbd variant="outline" size="sm">Cmd</Kbd>
+ * ```
+ */
+export declare const Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLElement>>;
+
+/**
+ * Kbd component props
+ */
+declare interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Visual variant for the kbd element
+     * @default "filled"
+     */
+    variant?: Kbd_2.Variant;
+    /**
+     * Size of the kbd element, aligned with Text component sizing
+     * @default "md"
+     */
+    size?: Kbd_2.Size;
+    children?: ReactNode;
+}
+
+/**
+ * Loader component for displaying loading states with spinner or bar variants
+ *
+ * @example
+ * ```tsx
+ * <Loader type="spinner" size="sm">
+ *   Loading...
+ * </Loader>
+ *
+ * <Loader type="bar" size="lg">
+ *   Please wait
+ * </Loader>
+ * ```
+ */
+export declare const Loader: ForwardRefExoticComponent<LoaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The type of loading indicator to display
+     * @default 'spinner'
+     */
+    type?: Loader_2.Type;
+    /**
+     * Size of the loading indicator
+     * @default 'sm'
+     */
+    size?: Loader_2.Size;
+    /**
+     * Loading status text to display below the indicator
+     */
+    children?: ReactNode;
+}
+
+declare const Text_2: ForwardRefExoticComponent<TextProps & RefAttributes<HTMLElement>>;
+export { Text_2 as Text }
+
+export { TextAs }
+
+export { TextIntent }
+
+export declare interface TextProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The HTML element to render
+     * @default 'p'
+     */
+    as?: Text_3.As;
+    /**
+     * Override the preset font-size
+     */
+    size?: Text_3.Size;
+    /**
+     * Override the preset font-weight
+     */
+    weight?: Text_3.Weight;
+    /**
+     * Text color intent
+     */
+    intent?: Text_3.Intent;
+    /**
+     * Text transform case
+     */
+    case?: Text_3.Case;
+    /**
+     * Text decoration transform
+     */
+    transform?: Text_3.Transform;
+    /**
+     * Text content
+     */
+    children: ReactNode;
+}
+
+export { TextSize }
+
+export { TextWeight }
+
+/**
+ * Attach static methods to component
+ */
+export declare const Tooltip: typeof TooltipRoot & TooltipStatic;
+
+declare interface TooltipGetTriggerPropsOptions {
+    /**
+     * Unique identifier matching the Tooltip's id
+     */
+    id: string;
+    /**
+     * Gap between tooltip and trigger in pixels
+     */
+    gap?: number;
+    /**
+     * Trigger type for determining popoverTarget behavior
+     */
+    triggerType?: "focus" | "hover" | "all";
+    [key: string]: any;
+}
+
+declare type TooltipPlacement = "top" | "bottom" | "left" | "right";
+
+export declare interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique identifier for the tooltip (matches popovertarget on trigger)
+     */
+    id: string;
+    /**
+     * Tooltip content (can be text via Tooltip.Text or any custom ReactNode)
+     */
+    children: ReactNode;
+    /**
+     * Placement relative to the trigger
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Gap between tooltip and trigger in pixels
+     */
+    gap?: number;
+    /**
+     * When to show tooltip: "focus", "hover", or "all"
+     */
+    triggerType?: "focus" | "hover" | "all";
+}
+
+/**
+ * Tooltip - Popover-based tooltip component using the Popover API
+ *
+ * Usage:
+ * ```tsx
+ * const triggerProps = Tooltip.getTooltipTriggerProps({ id: "my-tooltip" });
+ * <button {...triggerProps}>Hover me</button>
+ * <Tooltip id="my-tooltip" placement="top">Helpful text</Tooltip>
+ * ```
+ */
+declare const TooltipRoot: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>>;
+
+declare interface TooltipStatic {
+    /**
+     * Text content variant with styling
+     */
+    Text: typeof TooltipText;
+    /**
+     * Get the required attributes for the trigger element
+     */
+    getTooltipTriggerProps(options: TooltipGetTriggerPropsOptions): Record<string, unknown>;
+    /**
+     * Close a tooltip popover by id
+     * @example Tooltip.close({ id: "my-tooltip" })
+     */
+    close(options: {
+        id: string;
+    }): void;
+}
+
+declare const TooltipText: React.ForwardRefExoticComponent<TooltipTextProps & React.RefAttributes<HTMLDivElement>>;
+
+declare interface TooltipTextProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Text content
+     */
+    children: ReactNode;
+    /**
+     * Maximum width (CSS value e.g. "280px", "20rem")
+     */
+    maxWidth?: string;
+    /**
+     * Maximum number of lines before clamping
+     */
+    maxLines?: number;
+}
+
+export { }