@hai3/uikit 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,101 @@
+# @hai3/uikit
+
+Production-ready React component library for the HAI3 framework.
+
+## Overview
+
+`@hai3/uikit` provides a comprehensive set of accessible, themeable React components built on shadcn/ui and Radix UI primitives. The library serves as the reference implementation of HAI3's component contracts and offers a complete design system for building modern SaaS applications.
+
+## Purpose
+
+This package delivers enterprise-grade UI components with consistent APIs, full TypeScript support, and accessibility built-in. Components follow a hierarchical architecture where base primitives wrap shadcn/ui elements, and composite components combine these primitives into higher-level patterns.
+
+## Component Architecture
+
+### Base Components
+
+Foundation-level components that wrap shadcn/ui primitives with HAI3-specific APIs and conventions. These include buttons, inputs, layout elements, and other atomic UI building blocks. All base components accept standardized prop interfaces defined in the contracts package.
+
+### Composite Components
+
+Higher-level components built by combining base components into common patterns. Examples include icon buttons, theme selectors, and navigation elements. Composites demonstrate best practices for component composition and serve as templates for custom implementations.
+
+### Theme Integration
+
+All components support theming through Tailwind CSS custom properties. Themes define design tokens that components consume automatically, enabling dynamic theme switching without component changes.
+
+## Key Features
+
+- **Type Safety**: Complete TypeScript definitions with strict typing
+- **Accessibility**: Built on Radix UI primitives following WAI-ARIA standards
+- **Themeable**: Full design system integration via Tailwind CSS
+- **Tree-Shakeable**: ES modules with side-effect-free exports
+- **Consistent APIs**: Standardized prop interfaces across all components
+
+## Installation
+
+```bash
+npm install @hai3/uikit
+```
+
+### Required Peer Dependencies
+
+The package requires React 18+ and several UI primitive libraries:
+
+```bash
+npm install react react-dom @radix-ui/react-select @radix-ui/react-slot \
+  class-variance-authority clsx lucide-react tailwind-merge tailwindcss-animate
+```
+
+## Integration
+
+### With HAI3 Applications
+
+HAI3 applications integrate UI Kit through the component registry system. Register components at application startup, and the framework makes them available to all screens and layouts.
+
+### As Standalone Library
+
+The package can be used independently of the HAI3 framework. Import components directly and use them as standard React components with full TypeScript support.
+
+## Component Categories
+
+- **Form Controls**: Buttons, inputs, switches, sliders, and selects
+- **Layout**: Headers, footers, menus, sidebars, and containers
+- **Overlays**: Dialogs, popups, tooltips, and modals
+- **Navigation**: Menu items, breadcrumbs, and tabs
+- **Data Display**: Cards, lists, avatars, and badges
+- **Feedback**: Progress indicators, loaders, and alerts
+
+## Customization
+
+### Styling Approach
+
+Components use Tailwind CSS with class-variance-authority for variant management. Override default styles through className props or customize the Tailwind configuration.
+
+### Component Extension
+
+Build custom components by composing base components or extending existing ones. The type system ensures custom components maintain compatibility with the framework.
+
+## Browser Support
+
+- Chrome/Edge (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+
+## Version
+
+**Alpha Release** (`0.1.0-alpha.0`) - APIs may change before stable release.
+
+## License
+
+Apache-2.0
+
+## Documentation
+
+Full framework documentation: [HAI3 Documentation](https://github.com/HAI3org/HAI3)
+
+## Related Packages
+
+- [`@hai3/uikit-contracts`](../uikit-contracts) - Type definitions and contracts
+- [`@hai3/uicore`](../uicore) - Core framework and layout system
+- [`@hai3/studio`](../studio) - Development tools overlay

package/dist/index.d.mts

@@ -0,0 +1,514 @@
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ButtonVariant, ButtonSize, TextDirection, IconButtonSize } from '@hai3/uikit-contracts';
+export { ButtonSize, ButtonVariant, IconButtonSize } from '@hai3/uikit-contracts';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare const buttonVariants: (props?: ({
+    variant?: ButtonVariant | null | undefined;
+    size?: ButtonSize | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+}
+declare function Badge({ className, variant, asChild, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Enable auto-resize behavior (adjusts height based on content)
+     */
+    autoResize?: boolean;
+    /**
+     * Minimum height in pixels when auto-resize is enabled (default: 50)
+     */
+    minHeight?: number;
+    /**
+     * Maximum height in pixels when auto-resize is enabled (default: 350)
+     */
+    maxHeight?: number;
+    /**
+     * Size variant (affects min-height)
+     * - sm: min-h-11 (44px / 2.75rem)
+     * - default: min-h-[60px] (3.75rem)
+     * - lg: min-h-20 (80px / 5rem)
+     */
+    size?: 'sm' | 'default' | 'lg';
+}
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, skeleton inherits text color instead of using bg-muted
+     * Useful for buttons, menu items, and colored text
+     */
+    inheritColor?: boolean;
+}
+declare function Skeleton({ className, inheritColor, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    icon?: React$1.ComponentType<{
+        className?: string;
+    }>;
+    size?: string;
+}
+declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SliderTrack: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderTrackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SliderRange: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderRangeProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SliderThumb: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderThumbProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const TooltipProvider: {
+    ({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+    displayName: string | undefined;
+};
+declare const Tooltip: {
+    ({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+    displayName: string | undefined;
+};
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Header Props
+ */
+interface HeaderProps {
+    children?: React__default.ReactNode;
+    className?: string;
+}
+/**
+ * Header Component
+ * Base layout primitive for app header
+ * HAI3 custom component (not from shadcn)
+ * Accepts children for flexible content (user info, actions, etc.)
+ */
+declare const Header: React__default.ForwardRefExoticComponent<HeaderProps & React__default.RefAttributes<HTMLElement>>;
+
+declare const NavigationMenu: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React$1.RefAttributes<HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const NavigationMenuItem: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React$1.RefAttributes<HTMLLIElement>>;
+declare const NavigationMenuTrigger: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenuContent: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuViewport: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuIndicator: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Sheet: React$1.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React$1.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React$1.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React$1.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+declare const Dialog: React$1.FC<SheetPrimitive.DialogProps>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React$1.FC<SheetPrimitive.DialogPortalProps>;
+declare const DialogClose: React$1.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const DropdownMenu: React$1.FC<Omit<React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, 'dir'> & {
+    dir?: TextDirection;
+}>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * IconButton component for HAI3 UI-Core
+ * Provides a consistent icon-only button across all screens
+ * Composes UI Kit Button with icon size variant
+ */
+interface IconButtonProps extends Omit<ButtonProps, 'size' | 'asChild'> {
+    size?: IconButtonSize;
+    'aria-label': string;
+}
+declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * DropdownButton Component
+ * Button with integrated dropdown chevron icon
+ * Used for dropdown triggers in ThemeSelector, ScreensetSelector, etc.
+ * Forwards all props to Button for DropdownMenuTrigger compatibility
+ */
+interface DropdownButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React__default.ReactNode;
+    variant?: ButtonVariant;
+    className?: string;
+}
+declare const DropdownButton: React__default.ForwardRefExoticComponent<DropdownButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
+    collapsed?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const SidebarContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuIcon: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SidebarMenuLabel: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Sidebar Header Component
+ * Pure presentational component for sidebar logo/branding area
+ * Used with Sidebar component for consistent header styling
+ */
+
+interface SidebarHeaderProps extends React$1.ComponentProps<"div"> {
+    /**
+     * Logo icon element (should be properly sized SVG)
+     */
+    logo?: React$1.ReactNode;
+    /**
+     * Logo text/branding element (shown when expanded)
+     */
+    logoText?: React$1.ReactNode;
+    /**
+     * Whether the sidebar is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * Click handler for the header area
+     */
+    onClick?: () => void;
+}
+declare const SidebarHeader: React$1.ForwardRefExoticComponent<Omit<SidebarHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * User Info Props
+ * Matches UI Core contract in uikitContracts.ts
+ */
+interface UserInfoProps {
+    displayName?: string;
+    email?: string;
+    avatarUrl?: string;
+    className?: string;
+    loading?: boolean;
+}
+/**
+ * UserInfo Component
+ * Composite component combining shadcn Avatar + text
+ * Displays user avatar with fallback initials and name/email
+ */
+declare const UserInfo: React__default.ForwardRefExoticComponent<UserInfoProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * MessageBubble - Chat message display component
+ * Pure presentational component for displaying chat messages
+ */
+declare enum MessageType {
+    User = "user",
+    Assistant = "assistant"
+}
+interface MessageBubbleProps {
+    type: MessageType;
+    content: string;
+    timestamp?: Date;
+    className?: string;
+    onCopy?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+}
+declare const MessageBubble: ({ type, content, className, onCopy, onEdit, onDelete, }: MessageBubbleProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * ChatInput - Message input component
+ * Pure presentational component for chat message input
+ */
+interface ChatInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    onAttachFile?: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    maxRows?: number;
+    className?: string;
+}
+declare const ChatInput: ({ value, onChange, onSend, onAttachFile, placeholder, disabled, maxRows, className, }: ChatInputProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * ThreadList - Chat thread list component
+ * Pure presentational component for displaying chat threads
+ */
+interface ChatThread {
+    id: string;
+    title: string;
+    preview: string;
+    timestamp: Date;
+    isTemporary?: boolean;
+}
+interface ThreadListProps {
+    threads: ChatThread[];
+    selectedThreadId?: string;
+    onThreadSelect: (threadId: string) => void;
+    onNewThread: () => void;
+    onDeleteThread?: (threadId: string) => void;
+    searchQuery?: string;
+    onSearchChange?: (query: string) => void;
+    loading?: boolean;
+    className?: string;
+}
+declare const ThreadList: ({ threads, selectedThreadId, onThreadSelect, onNewThread, onDeleteThread, searchQuery, onSearchChange, loading, className, }: ThreadListProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Menu Icon ID
+ * Well-known constant defined where it belongs
+ */
+declare const MENU_ICON_ID: "menu";
+/**
+ * Menu Icon (Hamburger)
+ * Core icon for header menu toggle
+ * Tree-shakeable - imported and registered by app
+ */
+declare const MenuIcon: React__default.FC<{
+    className?: string;
+}>;
+
+/**
+ * Close Icon ID
+ * Well-known constant defined where it belongs
+ */
+declare const CLOSE_ICON_ID: "close";
+/**
+ * Close Icon (X)
+ * Core icon for closing dialogs/popups
+ * Tree-shakeable - imported and registered by app
+ */
+declare const CloseIcon: React__default.FC<{
+    className?: string;
+}>;
+
+/**
+ * Theme type definitions for HAI3
+ */
+interface Theme {
+    name: string;
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        foreground: string;
+        muted: string;
+        border: string;
+        error: string;
+        warning: string;
+        success: string;
+        info: string;
+        mainMenu: {
+            DEFAULT: string;
+            foreground: string;
+            hover: string;
+            selected: string;
+            border: string;
+        };
+        chat: {
+            leftMenu: {
+                DEFAULT: string;
+                foreground: string;
+                hover: string;
+                selected: string;
+                border: string;
+            };
+            message: {
+                user: {
+                    background: string;
+                    foreground: string;
+                };
+                assistant: {
+                    background: string;
+                    foreground: string;
+                };
+            };
+            input: {
+                background: string;
+                foreground: string;
+                border: string;
+            };
+            codeBlock: {
+                background: string;
+                foreground: string;
+                border: string;
+                headerBackground: string;
+            };
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+        };
+        fontWeight: {
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        lineHeight: {
+            tight: string;
+            normal: string;
+            relaxed: string;
+        };
+    };
+    borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    transitions: {
+        fast: string;
+        base: string;
+        slow: string;
+        slower: string;
+    };
+}
+
+/**
+ * Theme application utility
+ * Generates CSS variables from theme objects dynamically
+ * Single source of truth: theme objects in TypeScript
+ * Maps to shadcn CSS variable naming convention
+ */
+
+/**
+ * Apply theme to document by injecting CSS variables
+ * Theme objects are the single source of truth
+ * @param theme - Theme object to apply
+ * @param themeName - Optional theme name for data attribute
+ */
+declare const applyTheme: (theme: Theme, themeName?: string) => void;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CLOSE_ICON_ID, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatInput, type ChatInputProps, type ChatThread, CloseIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownButton, type DropdownButtonProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Header, type HeaderProps, IconButton, type IconButtonProps, Input, MENU_ICON_ID, MenuIcon, MessageBubble, type MessageBubbleProps, MessageType, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarHeader, type SidebarHeaderProps, SidebarMenu, SidebarMenuButton, SidebarMenuIcon, SidebarMenuItem, SidebarMenuLabel, Skeleton, Slider, SliderRange, SliderThumb, SliderTrack, Spinner, type SpinnerProps, Switch, Textarea, type Theme, ThreadList, type ThreadListProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserInfo, type UserInfoProps, applyTheme, badgeVariants };