@proyecto-viviana/ui 0.1.1 → 0.1.3

package/dist/index.d.ts

@@ -1,51 +1,649 @@
-export { Button } from './button';
-export type { ButtonProps, ButtonVariant, ButtonStyle, StaticColor } from './button';
-export { Badge } from './badge';
-export type { BadgeProps, BadgeVariant, BadgeSize } from './badge';
-export { Alert } from './alert';
-export type { AlertProps, AlertVariant } from './alert';
-export { Avatar, AvatarGroup } from './avatar';
-export type { AvatarProps, AvatarGroupProps, AvatarSize } from './avatar';
-export { TabSwitch, ToggleSwitch } from './switch';
-export type { TabSwitchProps, ToggleSwitchProps, SwitchSize } from './switch';
-export { Checkbox, CheckboxGroup } from './checkbox';
-export type { CheckboxProps, CheckboxGroupProps, CheckboxSize } from './checkbox';
-export { RadioGroup, Radio } from './radio';
-export type { RadioGroupProps, RadioProps, RadioGroupOrientation, RadioGroupSize } from './radio';
-export { Dialog } from './dialog';
-export type { DialogProps } from './dialog';
-export { Icon, GitHubIcon } from './icon';
-export type { IconProps, GitHubIconProps } from './icon';
-export { Tooltip } from './tooltip';
-export type { TooltipProps } from './tooltip';
-export { TextField } from './textfield';
-export type { TextFieldProps, TextFieldSize, TextFieldVariant } from './textfield';
-export { Link } from './link';
-export type { LinkProps, LinkVariant } from './link';
-export { ProgressBar } from './progress-bar';
-export type { ProgressBarProps, ProgressBarSize, ProgressBarVariant } from './progress-bar';
-export { Separator } from './separator';
-export type { SeparatorProps, SeparatorVariant, SeparatorSize } from './separator';
-export { Chip } from './custom/chip';
-export type { ChipProps, ChipVariant } from './custom/chip';
-export { NavHeader } from './custom/nav-header';
-export type { NavHeaderProps } from './custom/nav-header';
-export { LateralNav, NavItem, NavLink, NavSection } from './custom/lateral-nav';
-export type { LateralNavProps, NavItemProps, NavLinkProps, NavSectionProps } from './custom/lateral-nav';
-export { TimelineItem } from './custom/timeline-item';
-export type { TimelineItemProps, TimelineEventType } from './custom/timeline-item';
-export { Conversation, ConversationPreview, ConversationBubble } from './custom/conversation';
-export type { ConversationProps, ConversationPreviewProps, ConversationBubbleProps, Message } from './custom/conversation';
-export { ProfileCard } from './custom/profile-card';
-export type { ProfileCardProps } from './custom/profile-card';
-export { EventCard, EventListItem } from './custom/event-card';
-export type { EventCardProps, EventListItemProps } from './custom/event-card';
-export { CalendarCard } from './custom/calendar-card';
-export type { CalendarCardProps } from './custom/calendar-card';
-export { Logo } from './custom/logo';
-export type { LogoProps, LogoSize } from './custom/logo';
-export { ProjectCard } from './custom/project-card';
-export type { ProjectCardProps, ProjectCardSize } from './custom/project-card';
-export { PageLayout } from './custom/page-layout';
-export type { PageLayoutProps } from './custom/page-layout';
-//# sourceMappingURL=index.d.ts.map
+import * as solid_js from 'solid-js';
+import { JSX, Component } from 'solid-js';
+import { ButtonProps as ButtonProps$1, ToggleSwitchProps as ToggleSwitchProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, LinkProps as LinkProps$1 } from '@proyecto-viviana/solidaria-components';
+import { AriaTextFieldProps, Orientation } from '@proyecto-viviana/solidaria';
+
+type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'positive' | 'negative' | 'ghost' | 'link';
+type ButtonStyle = 'fill' | 'outline';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type StaticColor = 'white' | 'black';
+interface ButtonProps extends Omit<ButtonProps$1, 'class' | 'children' | 'style'> {
+    /** The content to display in the button. */
+    children?: JSX.Element;
+    /** The visual style of the button. */
+    variant?: ButtonVariant;
+    /** The background style of the button. */
+    buttonStyle?: ButtonStyle;
+    /** The size of the button. */
+    size?: ButtonSize;
+    /** Whether the button should take up the full width of its container. */
+    fullWidth?: boolean;
+    /** The static color style to apply. Useful when the button appears over a color background. */
+    staticColor?: StaticColor;
+    /** Additional CSS class name. */
+    class?: string;
+}
+
+/**
+ * Button component for proyecto-viviana-ui
+ *
+ * A styled button component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Button from solidaria-components.
+ */
+
+/**
+ * Buttons allow users to perform an action or to navigate to another page.
+ * They have multiple styles for various needs, and are ideal for calling attention to
+ * where a user needs to do something in order to move forward in a flow.
+ *
+ * Built on solidaria-components Button for full accessibility support.
+ * Styles are defined in components.css using the vui-button class system.
+ */
+declare function Button(props: ButtonProps): JSX.Element;
+
+type BadgeVariant = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps {
+    children?: JSX.Element;
+    count?: number;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    class?: string;
+}
+declare function Badge(props: BadgeProps): JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    children: JSX.Element;
+    variant?: AlertVariant;
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    class?: string;
+}
+declare function Alert(props: AlertProps): JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?: AvatarSize;
+    fallback?: string;
+    online?: boolean;
+    class?: string;
+}
+declare function Avatar(props: AvatarProps): solid_js.JSX.Element;
+interface AvatarGroupProps {
+    children: any;
+    max?: number;
+    size?: AvatarSize;
+}
+declare function AvatarGroup(props: AvatarGroupProps): solid_js.JSX.Element;
+
+/**
+ * ToggleSwitch component for proyecto-viviana-ui
+ *
+ * A styled switch component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Switch from solidaria-components.
+ *
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ */
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+interface ToggleSwitchProps extends Omit<ToggleSwitchProps$1, 'class' | 'children'> {
+    /** The size of the switch. */
+    size?: SwitchSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label text for the switch. */
+    children?: JSX.Element;
+}
+/**
+ * A switch allows users to toggle between two mutually exclusive states.
+ *
+ * Built on solidaria-components Switch for full accessibility support.
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ */
+declare function ToggleSwitch(props: ToggleSwitchProps): JSX.Element;
+
+/**
+ * Switch components for proyecto-viviana-ui
+ *
+ * This file exports:
+ * - ToggleSwitch: The primary switch component built on solidaria-components
+ *                 (named to avoid conflict with SolidJS's built-in Switch)
+ * - TabSwitch: A custom two-option tab selector
+ */
+
+interface SwitchOption {
+    label: string;
+    value: string;
+}
+interface TabSwitchProps {
+    options: SwitchOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    class?: string;
+}
+/**
+ * A tab-style switch that allows users to select between two options.
+ * This is a custom component, not based on solidaria/react-aria.
+ */
+declare function TabSwitch(props: TabSwitchProps): JSX.Element;
+
+/**
+ * Checkbox component for proyecto-viviana-ui
+ *
+ * A styled checkbox component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Checkbox from solidaria-components.
+ */
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface CheckboxProps extends Omit<CheckboxProps$1, 'class' | 'children' | 'style'> {
+    /** The size of the checkbox. */
+    size?: CheckboxSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label text for the checkbox. */
+    children?: JSX.Element;
+}
+interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, 'class' | 'children' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+    /** Children checkboxes. */
+    children?: JSX.Element;
+    /** Label for the group. */
+    label?: string;
+    /** Description for the group. */
+    description?: string;
+    /** Error message when invalid. */
+    errorMessage?: string;
+}
+/**
+ * A checkbox allows users to select one or more items from a set.
+ *
+ * Built on solidaria-components Checkbox for full accessibility support.
+ */
+declare function Checkbox(props: CheckboxProps): JSX.Element;
+/**
+ * A checkbox group allows users to select multiple items from a list.
+ *
+ * Built on solidaria-components CheckboxGroup for full accessibility support.
+ */
+declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+
+/**
+ * RadioGroup and Radio components for proyecto-viviana-ui
+ *
+ * Styled radio components built on top of solidaria-components.
+ *
+ * IMPORTANT: Due to SolidJS's JSX evaluation order, we cannot wrap the headless
+ * components in a traditional way. Instead, we re-export them and provide
+ * styling through the class prop functions.
+ */
+
+type RadioGroupOrientation = 'horizontal' | 'vertical';
+type RadioGroupSize = 'sm' | 'md' | 'lg';
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'class' | 'style'> {
+    /** The size of the radio buttons. */
+    size?: RadioGroupSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label for the group. */
+    label?: string;
+    /** Description for the group. */
+    description?: string;
+    /** Error message when invalid. */
+    errorMessage?: string;
+}
+interface RadioProps extends Omit<RadioProps$1, 'class' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+/**
+ * A radio group allows users to select a single option from a list of mutually exclusive options.
+ *
+ * Built on solidaria-components RadioGroup for full accessibility support.
+ */
+declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+/**
+ * A radio button allows users to select a single option from a list.
+ * Must be used within a RadioGroup.
+ *
+ * Built on solidaria-components Radio for full accessibility support.
+ */
+declare function Radio(props: RadioProps): JSX.Element;
+
+interface DialogProps {
+    title: string;
+    subtitle?: string;
+    children: JSX.Element;
+    tags?: string[];
+    primaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    secondaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    class?: string;
+}
+declare function Dialog(props: DialogProps): JSX.Element;
+
+interface GitHubIconProps {
+    size?: number;
+    color?: string;
+}
+declare function GitHubIcon(props: GitHubIconProps): JSX.Element;
+
+interface IconProps {
+    /** The icon component to render (should accept size and color props) */
+    icon: Component<{
+        size?: string | number;
+        color?: string;
+    }>;
+    /** Size of the icon (e.g., '24px' or 24) */
+    size?: string | number;
+    /** Color of the icon */
+    color?: string;
+    /** Whether to show the accent shadow effect (4px offset to bottom) */
+    withShadow?: boolean;
+    /** Additional CSS class */
+    class?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+/**
+ * Icon wrapper component with optional accent shadow effect.
+ *
+ * The shadow effect creates a 4px offset accent-colored duplicate
+ * of the icon behind it for a stylized look.
+ */
+declare function Icon(props: IconProps): JSX.Element;
+
+interface TooltipProps {
+    /** The content to show in the tooltip */
+    label: string;
+    /** The trigger element */
+    children: JSX.Element;
+    /** Position of the tooltip */
+    position?: 'top' | 'bottom';
+    /** Additional CSS class */
+    class?: string;
+}
+/**
+ * Tooltip component that shows a label on hover.
+ * Uses CSS-only hover effect for performance.
+ */
+declare function Tooltip(props: TooltipProps): JSX.Element;
+
+/**
+ * TextField component for proyecto-viviana-ui
+ *
+ * A styled text field component built on solidaria hooks directly.
+ * This bypasses solidaria-components for now due to context timing issues.
+ */
+
+type TextFieldSize = 'sm' | 'md' | 'lg';
+type TextFieldVariant = 'outline' | 'filled';
+interface TextFieldProps extends Omit<AriaTextFieldProps, 'children'> {
+    /** The size of the text field. */
+    size?: TextFieldSize;
+    /** The visual variant of the text field. */
+    variant?: TextFieldVariant;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label text for the input. */
+    label?: string;
+    /** Description text shown below the input. */
+    description?: string;
+    /** Error message shown when invalid. */
+    errorMessage?: string;
+}
+/**
+ * A text field allows users to enter a plain text value with a keyboard.
+ *
+ * Built directly on solidaria hooks for full accessibility support.
+ */
+declare function TextField(props: TextFieldProps): JSX.Element;
+
+/**
+ * Link component for proyecto-viviana-ui
+ *
+ * Styled link component built on top of solidaria-components.
+ */
+
+type LinkVariant = 'primary' | 'secondary' | 'subtle';
+interface LinkProps extends Omit<LinkProps$1, 'class' | 'style' | 'children'> {
+    /** The visual style of the link. @default 'primary' */
+    variant?: LinkVariant;
+    /** Whether the link is on its own vs inside a longer string of text. */
+    isStandalone?: boolean;
+    /** Whether the link should be displayed with a quiet style (no underline by default). */
+    isQuiet?: boolean;
+    /** Additional CSS class name. */
+    class?: string;
+    /** The content of the link. */
+    children?: JSX.Element;
+}
+/**
+ * Links allow users to navigate to a different location.
+ * They can be presented inline inside a paragraph or as standalone text.
+ *
+ * Built on solidaria-components Link for full accessibility support.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about">About Us</Link>
+ *
+ * // Secondary variant
+ * <Link href="/help" variant="secondary">Help</Link>
+ *
+ * // Standalone (bold, no underline until hover)
+ * <Link href="/home" isStandalone isQuiet>Home</Link>
+ * ```
+ */
+declare function Link(props: LinkProps): JSX.Element;
+
+/**
+ * ProgressBar component for proyecto-viviana-ui
+ *
+ * Styled progress bar component built on top of the solidaria hook directly.
+ */
+
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+type ProgressBarVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+interface ProgressBarProps {
+    /** The current value (controlled). @default 0 */
+    value?: number;
+    /** The smallest value allowed. @default 0 */
+    minValue?: number;
+    /** The largest value allowed. @default 100 */
+    maxValue?: number;
+    /** The content to display as the value's label (e.g. "1 of 4"). */
+    valueLabel?: string;
+    /** Whether presentation is indeterminate when progress isn't known. */
+    isIndeterminate?: boolean;
+    /** The size of the progress bar. @default 'md' */
+    size?: ProgressBarSize;
+    /** The visual style variant. @default 'primary' */
+    variant?: ProgressBarVariant;
+    /** The label to display above the progress bar. */
+    label?: string;
+    /** Whether to show the value text. @default true for determinate progress */
+    showValueLabel?: boolean;
+    /** Additional CSS class name. */
+    class?: string;
+    /** An accessibility label. */
+    'aria-label'?: string;
+}
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={50} label="Loading..." />
+ *
+ * // Indeterminate
+ * <ProgressBar isIndeterminate label="Processing..." />
+ *
+ * // Different variants
+ * <ProgressBar value={75} variant="success" />
+ * ```
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+
+/**
+ * Separator component for proyecto-viviana-ui
+ *
+ * Styled separator component built on top of solidaria hook directly.
+ */
+
+type SeparatorVariant = 'default' | 'subtle' | 'strong';
+type SeparatorSize = 'sm' | 'md' | 'lg';
+interface SeparatorProps {
+    /** The orientation of the separator. @default 'horizontal' */
+    orientation?: Orientation;
+    /** The visual style variant. @default 'default' */
+    variant?: SeparatorVariant;
+    /** The size/thickness of the separator. @default 'md' */
+    size?: SeparatorSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** An accessibility label for the separator. */
+    'aria-label'?: string;
+}
+/**
+ * A separator is a visual divider between two groups of content,
+ * e.g. groups of menu items or sections of a page.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ *
+ * // Vertical separator
+ * <div class="flex items-center gap-4">
+ *   <span>Item 1</span>
+ *   <Separator orientation="vertical" />
+ *   <span>Item 2</span>
+ * </div>
+ *
+ * // Different variants
+ * <Separator variant="strong" />
+ * ```
+ */
+declare function Separator(props: SeparatorProps): JSX.Element;
+
+type ChipVariant = 'primary' | 'secondary' | 'accent' | 'outline';
+interface ChipProps {
+    text: string;
+    variant?: ChipVariant;
+    onClick?: () => void;
+    icon?: JSX.Element;
+    class?: string;
+}
+declare function Chip(props: ChipProps): JSX.Element;
+
+interface NavHeaderProps {
+    logo?: string;
+    logoAlt?: string;
+    logoText?: string;
+    children?: JSX.Element;
+    menuIcon?: JSX.Element;
+    onMenuClick?: () => void;
+    class?: string;
+}
+declare function NavHeader(props: NavHeaderProps): JSX.Element;
+
+interface NavItemProps {
+    title: string;
+    children?: JSX.Element;
+    class?: string;
+}
+declare function NavItem(props: NavItemProps): JSX.Element;
+interface NavLinkProps {
+    href: string;
+    children: JSX.Element;
+    active?: boolean;
+    class?: string;
+}
+declare function NavLink(props: NavLinkProps): JSX.Element;
+interface NavSectionProps {
+    title: string;
+    links?: {
+        href: string;
+        label: string;
+        active?: boolean;
+    }[];
+    children?: JSX.Element;
+    class?: string;
+}
+declare function NavSection(props: NavSectionProps): JSX.Element;
+interface LateralNavProps {
+    transparent?: boolean;
+    children?: JSX.Element;
+    class?: string;
+}
+declare function LateralNav(props: LateralNavProps): JSX.Element;
+
+type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custom';
+interface TimelineItemProps {
+    type?: TimelineEventType;
+    icon?: JSX.Element;
+    leftUser?: {
+        name: string;
+        avatar?: string;
+    };
+    rightUser?: {
+        name: string;
+        avatar?: string;
+    };
+    message?: JSX.Element;
+    class?: string;
+}
+declare function TimelineItem(props: TimelineItemProps): JSX.Element;
+
+interface Message {
+    id: string;
+    content: string;
+    sender: 'user' | 'other';
+    timestamp?: string;
+}
+interface ConversationPreviewProps {
+    user: {
+        name: string;
+        avatar?: string;
+        online?: boolean;
+    };
+    lastMessage?: string;
+    unreadCount?: number;
+    timestamp?: string;
+    onClick?: () => void;
+    class?: string;
+}
+declare function ConversationPreview(props: ConversationPreviewProps): solid_js.JSX.Element;
+interface ConversationBubbleProps {
+    content: string;
+    sender: 'user' | 'other';
+    timestamp?: string;
+    class?: string;
+}
+declare function ConversationBubble(props: ConversationBubbleProps): solid_js.JSX.Element;
+interface ConversationProps {
+    messages: Message[];
+    class?: string;
+}
+declare function Conversation(props: ConversationProps): solid_js.JSX.Element;
+
+interface ProfileCardProps {
+    username: string;
+    avatar?: string;
+    bio?: string;
+    followers?: number;
+    following?: number;
+    actions?: JSX.Element;
+    class?: string;
+}
+declare function ProfileCard(props: ProfileCardProps): JSX.Element;
+
+interface EventCardProps {
+    title: string;
+    image?: string;
+    date?: string;
+    author?: string;
+    authorAvatar?: string;
+    attendees?: {
+        avatar?: string;
+        name: string;
+    }[];
+    attendeeCount?: number;
+    decorationImage?: string;
+    actions?: JSX.Element;
+    class?: string;
+}
+declare function EventCard(props: EventCardProps): JSX.Element;
+interface EventListItemProps {
+    title: string;
+    image?: string;
+    subtitle?: string;
+    onClick?: () => void;
+    class?: string;
+}
+declare function EventListItem(props: EventListItemProps): JSX.Element;
+
+interface CalendarCardProps {
+    title: string;
+    image?: string;
+    tags?: string[];
+    followers?: {
+        name: string;
+    }[];
+    followerCount?: number;
+    class?: string;
+}
+declare function CalendarCard(props: CalendarCardProps): solid_js.JSX.Element;
+
+type LogoSize = "sm" | "md" | "lg" | "xl";
+interface LogoProps {
+    /** First word (light weight, muted color) */
+    firstWord?: string;
+    /** Second word (bold, with 3D effect) */
+    secondWord?: string;
+    /** Size variant of the logo */
+    size?: LogoSize;
+    /** Additional CSS classes */
+    class?: string;
+}
+/**
+ * Two-word logo with retro synthwave 3D effect.
+ * First word is light/muted, second word has bold styling with pink 3D shadow.
+ *
+ * @example
+ * // Default usage
+ * <Logo />
+ *
+ * @example
+ * // Custom text
+ * <Logo firstWord="My" secondWord="Brand" size="lg" />
+ */
+declare function Logo(props: LogoProps): JSX.Element;
+
+type ProjectCardSize = 'sm' | 'md' | 'lg';
+interface ProjectCardProps {
+    /** Project name shown in tooltip on hover */
+    name: string;
+    /** Image source for the project logo */
+    imageSrc: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Optional link to the project */
+    href?: string;
+    /** Size of the card */
+    size?: ProjectCardSize;
+    /** Whether the project is inactive/greyed out */
+    inactive?: boolean;
+    /** Additional CSS class */
+    class?: string;
+}
+/**
+ * Project card with logo and hover tooltip.
+ * Used for showcasing ecosystem projects.
+ */
+declare function ProjectCard(props: ProjectCardProps): JSX.Element;
+
+interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Content of the page */
+    children: JSX.Element;
+}
+/**
+ * PageLayout provides consistent page structure with proper background and font styling.
+ * Use this as the root wrapper for all pages.
+ */
+declare function PageLayout(props: PageLayoutProps): JSX.Element;
+
+export { Alert, type AlertProps, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonStyle, type ButtonVariant, CalendarCard, type CalendarCardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipVariant, Conversation, ConversationBubble, type ConversationBubbleProps, ConversationPreview, type ConversationPreviewProps, type ConversationProps, Dialog, type DialogProps, EventCard, type EventCardProps, EventListItem, type EventListItemProps, GitHubIcon, type GitHubIconProps, Icon, type IconProps, LateralNav, type LateralNavProps, Link, type LinkProps, type LinkVariant, Logo, type LogoProps, type LogoSize, type Message, NavHeader, type NavHeaderProps, NavItem, type NavItemProps, NavLink, type NavLinkProps, NavSection, type NavSectionProps, PageLayout, type PageLayoutProps, ProfileCard, type ProfileCardProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, ProjectCard, type ProjectCardProps, type ProjectCardSize, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, Separator, type SeparatorProps, type SeparatorSize, type SeparatorVariant, type StaticColor, type SwitchSize, TabSwitch, type TabSwitchProps, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type TimelineEventType, TimelineItem, type TimelineItemProps, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps };