@camstack/ui-library 0.1.25

package/dist/index.d.ts

@@ -0,0 +1,415 @@
+export { CamStackColorTokens, CamStackTheme, DeepPartial, ThemeMode, ThemeProvider, UseThemeModeReturn, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode } from './theme/index.js';
+import { ClassValue } from 'clsx';
+import { LucideIcon } from 'lucide-react';
+import * as react from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef, SortingState, ColumnFiltersState, PaginationState } from '@tanstack/react-table';
+export { ColumnDef, ColumnFiltersState, PaginationState, SortingState } from '@tanstack/react-table';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+type ProviderType = 'frigate' | 'scrypted' | 'reolink' | 'homeAssistant' | 'rtsp';
+declare const providerIcons: Record<ProviderType, LucideIcon>;
+
+type StatusType = 'online' | 'offline' | 'degraded' | 'unknown';
+declare const statusIcons: Record<StatusType, LucideIcon>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const iconButtonVariants: (props?: ({
+    variant?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonVariants> {
+    icon: LucideIcon;
+    'aria-label': string;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;
+    styleVariant?: "outline" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {
+    style?: 'solid' | 'outline';
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const cardVariants: (props?: ({
+    variant?: "flat" | "bordered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+}
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorVariants> {
+}
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    state?: "default" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    options: SelectOption[];
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label?: string;
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DialogProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Dialog({ children, open: controlledOpen, onOpenChange }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ children, ...props }: HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare const contentVariants: (props?: ({
+    width?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DialogContentProps extends HTMLAttributes<HTMLDialogElement>, VariantProps<typeof contentVariants> {
+}
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDialogElement>>;
+declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+
+declare function Dropdown({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function DropdownContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
+interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: LucideIcon;
+    variant?: 'default' | 'danger';
+}
+declare function DropdownItem({ className, icon: Icon, variant, children, onClick, ...props }: DropdownItemProps): react_jsx_runtime.JSX.Element;
+
+declare function Tooltip({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+interface PopoverProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Popover({ children, open: controlledOpen, onOpenChange }: PopoverProps): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
+
+interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+}
+declare function Tabs({ value: controlledValue, onValueChange, defaultValue, className, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+declare function TabsTrigger({ value, className, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare function TabsContent({ value, className, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FloatingPanelProps {
+    /** Panel title displayed in the title bar */
+    title: string;
+    /** Called when the close button is clicked */
+    onClose: () => void;
+    /** Panel content */
+    children: ReactNode;
+    /** Default width in pixels */
+    defaultWidth?: number;
+    /** Default height in pixels */
+    defaultHeight?: number;
+    /** Minimum width in pixels */
+    minWidth?: number;
+    /** Minimum height in pixels */
+    minHeight?: number;
+    /** Offset index to stagger multiple panels (adds 30px offset per index) */
+    offsetIndex?: number;
+    /** Additional CSS classes for the panel container */
+    className?: string;
+}
+declare function FloatingPanel({ title, onClose, children, defaultWidth, defaultHeight, minWidth, minHeight, offsetIndex, className, }: FloatingPanelProps): react_jsx_runtime.JSX.Element;
+
+type Status = 'online' | 'offline' | 'degraded' | 'unknown';
+interface StatusBadgeProps {
+    status: Status;
+    showDot?: boolean;
+    showLabel?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+declare function StatusBadge({ status, showDot, showLabel, size, className, }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface ProviderBadgeProps {
+    provider: ProviderType;
+    showLabel?: boolean;
+    className?: string;
+}
+declare function ProviderBadge({ provider, showLabel, className, }: ProviderBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface FormFieldProps {
+    label: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    children: ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+declare function FormField({ label, description, error, required, children, orientation, className, }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, subtitle, actions, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+}
+declare function EmptyState({ icon: Icon, title, description, action, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmDialogProps {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    variant?: 'danger' | 'default';
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+declare function ConfirmDialog({ title, message, confirmLabel, cancelLabel, onConfirm, onCancel, variant, open, onOpenChange, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
+interface StatCardProps {
+    value: string | number;
+    label: string;
+    trend?: {
+        value: number;
+        direction: 'up' | 'down';
+    };
+    className?: string;
+}
+declare function StatCard({ value, label, trend, className }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+interface KeyValueListProps {
+    items: {
+        key: string;
+        value: ReactNode;
+    }[];
+    className?: string;
+}
+declare function KeyValueList({ items, className }: KeyValueListProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    children: string;
+    maxHeight?: number;
+    className?: string;
+}
+declare function CodeBlock({ children, maxHeight, className }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+type FilterDef = {
+    type: 'search';
+    key: string;
+    placeholder?: string;
+} | {
+    type: 'select';
+    key: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+} | {
+    type: 'badge-toggle';
+    key: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+
+interface FilterBarProps {
+    filters: FilterDef[];
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    className?: string;
+}
+declare function FilterBar({ filters, values, onChange, className }: FilterBarProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarItemProps {
+    label: string;
+    icon: LucideIcon;
+    href: string;
+    badge?: string | number;
+    active?: boolean;
+    className?: string;
+}
+declare function SidebarItem({ label, icon: Icon, href, badge, active, className, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarSection {
+    label?: string;
+    items: SidebarItemProps[];
+}
+interface SidebarProps {
+    logo?: ReactNode;
+    sections: SidebarSection[];
+    footer?: SidebarItemProps[];
+    className?: string;
+}
+declare function Sidebar({ logo, sections, footer, className }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface AppShellProps {
+    sidebar: SidebarProps;
+    header?: {
+        breadcrumbs?: {
+            label: string;
+            href?: string;
+        }[];
+        actions?: ReactNode;
+    };
+    children: ReactNode;
+    className?: string;
+}
+declare function AppShell({ sidebar, header, children, className }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableAction {
+    label: string;
+    icon?: LucideIcon;
+    onClick: () => void;
+    variant?: 'danger' | 'default';
+}
+interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDef<T, unknown>[];
+    sorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    filtering?: ColumnFiltersState;
+    onFilteringChange?: (filtering: ColumnFiltersState) => void;
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+    };
+    onPaginationChange?: (pagination: PaginationState) => void;
+    loading?: boolean;
+    emptyState?: ReactNode;
+    rowActions?: (row: T) => DataTableAction[];
+    onRowClick?: (row: T) => void;
+    selectable?: boolean;
+    compact?: boolean;
+    stickyHeader?: boolean;
+    className?: string;
+}
+
+declare function DataTable<T>({ data, columns: userColumns, sorting, onSortingChange, filtering, onFilteringChange, pagination, onPaginationChange, loading, emptyState, rowActions, onRowClick, selectable, compact, stickyHeader, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DeviceCardBadge {
+    /** Badge label text */
+    label: string;
+    /** Optional icon rendered before the label */
+    icon?: ReactNode;
+    /** Click handler — makes the badge interactive */
+    onClick?: () => void;
+}
+interface DeviceCardAction {
+    /** Icon to render */
+    icon: ReactNode;
+    /** Tooltip / aria-label */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+}
+interface DeviceCardProps {
+    /** Primary title (e.g., device name) */
+    title: string;
+    /** Secondary text (e.g., model, IP) */
+    subtitle?: string;
+    /** Status: determines the color of the status dot */
+    status?: 'online' | 'offline' | 'warning' | 'unknown';
+    /** Whether this card is currently selected */
+    selected?: boolean;
+    /** Click handler for the card body */
+    onClick?: () => void;
+    /** Clickable badges (e.g., stream profiles) */
+    badges?: DeviceCardBadge[];
+    /** Action icons shown at the bottom (e.g., PTZ, events) */
+    actions?: DeviceCardAction[];
+    /** Content rendered at the bottom when status is offline (e.g., Connect button) */
+    offlineAction?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function DeviceCard({ title, subtitle, status, selected, onClick, badges, actions, offlineAction, className, }: DeviceCardProps): react_jsx_runtime.JSX.Element;
+
+interface DeviceGridProps {
+    /** Grid items */
+    children: ReactNode;
+    /** Minimum card width in pixels (default 220) */
+    minCardWidth?: number;
+    /** Gap between cards in Tailwind spacing units (default 3) */
+    gap?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function DeviceGrid({ children, minCardWidth, gap, className, }: DeviceGridProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, type AppShellProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableAction, type DataTableProps, DeviceCard, type DeviceCardAction, type DeviceCardBadge, type DeviceCardProps, DeviceGrid, type DeviceGridProps, Dialog, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownItem, DropdownTrigger, EmptyState, type EmptyStateProps, FilterBar, type FilterBarProps, type FilterDef, FloatingPanel, type FloatingPanelProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, KeyValueList, type KeyValueListProps, Label, type LabelProps, PageHeader, type PageHeaderProps, Popover, PopoverContent, PopoverTrigger, ProviderBadge, type ProviderBadgeProps, type ProviderType, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusType, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger, cn, providerIcons, statusIcons };