@camtomlabs/malix-design-system 0.1.2 → 0.1.3

package/dist/index.d.cts

@@ -0,0 +1,524 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+var version = 1;
+var tokens = [
+	"--malix-background-main",
+	"--malix-surface",
+	"--malix-surface-secondary",
+	"--malix-surface-hover",
+	"--malix-foreground",
+	"--malix-foreground-secondary",
+	"--malix-foreground-tertiary",
+	"--malix-foreground-disabled",
+	"--malix-border",
+	"--malix-border-strong",
+	"--malix-border-focus",
+	"--malix-overlay",
+	"--malix-cta-primary-bg",
+	"--malix-primary-hover",
+	"--malix-primary-active",
+	"--malix-primary-foreground",
+	"--malix-primary-light",
+	"--malix-success",
+	"--malix-success-light",
+	"--malix-success-foreground",
+	"--malix-warning",
+	"--malix-warning-light",
+	"--malix-warning-foreground",
+	"--malix-error",
+	"--malix-error-light",
+	"--malix-error-foreground",
+	"--malix-info",
+	"--malix-info-light",
+	"--malix-info-foreground",
+	"--malix-glass-bg",
+	"--malix-glass-border",
+	"--malix-glass-blur",
+	"--malix-sidebar-bg",
+	"--malix-sidebar-hover-bg",
+	"--malix-sidebar-active-bg",
+	"--malix-space-xs",
+	"--malix-space-sm",
+	"--malix-space-md",
+	"--malix-space-lg",
+	"--malix-space-xl",
+	"--malix-space-2xl",
+	"--malix-space-3xl",
+	"--malix-radius-sm",
+	"--malix-radius-md",
+	"--malix-radius-lg",
+	"--malix-radius-xl",
+	"--malix-radius-pill",
+	"--malix-text-xs",
+	"--malix-text-sm",
+	"--malix-text-base",
+	"--malix-text-lg",
+	"--malix-text-xl",
+	"--malix-text-2xl",
+	"--malix-font-body",
+	"--malix-font-heading",
+	"--malix-weight-normal",
+	"--malix-weight-medium",
+	"--malix-weight-semibold",
+	"--malix-weight-bold",
+	"--malix-shadow-btn-primary",
+	"--malix-shadow-btn-secondary",
+	"--malix-shadow-input",
+	"--malix-shadow-depth",
+	"--malix-shadow-card-l1",
+	"--malix-shadow-card-l2",
+	"--malix-shadow-card-l3",
+	"--malix-shadow-overlay",
+	"--malix-shadow-tooltip",
+	"--malix-shadow-sidebar",
+	"--malix-shadow-header"
+];
+var tokens_registry = {
+	version: version,
+	tokens: tokens
+};
+
+type DividerProps = React.HTMLAttributes<HTMLHRElement>;
+declare function Divider({ className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+
+type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+    initials: string;
+    size?: number;
+};
+declare function Avatar({ initials, size, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type PillVariant = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
+type PillProps = React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: PillVariant;
+};
+declare function Pill({ variant, children, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
+
+type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonVariant = 'text' | 'leading-icon-text' | 'icon-only' | 'icon-badge';
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    hierarchy?: ButtonHierarchy;
+    variant?: ButtonVariant;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    loading?: boolean;
+    label?: string;
+};
+declare function Button({ hierarchy, variant, icon, badge, loading, disabled, children, label, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    leadingIcon?: React.ReactNode;
+};
+declare function Input({ leadingIcon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function SearchInput(props: Omit<InputProps, 'type'>): react_jsx_runtime.JSX.Element;
+
+type InputGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    helperText?: string;
+    leadingIcon?: React.ReactNode;
+    error?: boolean;
+};
+declare function InputGroup({ label, helperText, leadingIcon, error, id, className, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+type TooltipProps = {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    placement?: TooltipPlacement;
+};
+declare function Tooltip({ content, children, placement }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+type SidebarItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: React.ReactNode;
+    active?: boolean;
+};
+declare function SidebarItem({ icon, active, children, className, ...props }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+type FlyoutMenuItem = {
+    icon?: React.ReactNode;
+    label: string;
+    active?: boolean;
+    onClick?: () => void;
+};
+type FlyoutMenuProps = React.HTMLAttributes<HTMLDivElement> & {
+    items: FlyoutMenuItem[];
+};
+declare function FlyoutMenu({ items, className, ...props }: FlyoutMenuProps): react_jsx_runtime.JSX.Element;
+
+type SidebarPanelProps = React.HTMLAttributes<HTMLElement> & {
+    collapsed?: boolean;
+    logo?: React.ReactNode;
+    collapsedLogo?: React.ReactNode;
+    navigation?: React.ReactNode;
+    footer?: React.ReactNode;
+    onToggleCollapse?: () => void;
+};
+declare function SidebarPanel({ collapsed, logo, collapsedLogo, navigation, footer, onToggleCollapse, className, ...props }: SidebarPanelProps): react_jsx_runtime.JSX.Element;
+
+type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+    pageTitle: string;
+    actions?: React.ReactNode;
+};
+declare function Header({ pageTitle, actions, className, ...props }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+type CardLevel = 1 | 2 | 3;
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    level?: CardLevel;
+    title?: string;
+    description?: string;
+};
+declare function Card({ level, title, description, children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+type StatCardChangeType = 'positive' | 'negative' | 'neutral';
+type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
+    label: string;
+    value: string;
+    change?: string;
+    changeType?: StatCardChangeType;
+};
+declare function StatCard({ label, value, change, changeType, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+};
+declare function DateInput({ value, placeholder, onChange, disabled, className, id, ...props }: DateInputProps): react_jsx_runtime.JSX.Element;
+
+type FilterTabItem = {
+    label: string;
+    count?: number;
+    value: string;
+};
+type FilterTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    items: FilterTabItem[];
+    value: string;
+    onChange: (value: string) => void;
+};
+declare function FilterTabs({ items, value, onChange, className, ...props }: FilterTabsProps): react_jsx_runtime.JSX.Element;
+
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+};
+type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+};
+declare function Breadcrumb({ items, separator, className, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+type ProgressBarVariant = 'default' | 'success';
+type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: number;
+    label?: string;
+    showPercent?: boolean;
+    variant?: ProgressBarVariant;
+};
+declare function ProgressBar({ value, label, showPercent, variant, className, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+};
+declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type StepStatus = 'completed' | 'active' | 'pending';
+type StepItem = {
+    label: string;
+    icon?: React.ReactNode;
+    status: StepStatus;
+};
+type StepperProps = {
+    steps: StepItem[];
+    className?: string;
+};
+declare function Stepper({ steps, className }: StepperProps): react_jsx_runtime.JSX.Element;
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+};
+declare function Textarea({ label, helperText, error, errorMessage, id, className, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+
+type ChatInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+declare function ChatInput({ value, onChange, onSend, placeholder, disabled, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+
+type SectionHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    description?: string;
+    actions?: React.ReactNode;
+};
+declare function SectionHeader({ title, description, actions, className, ...props }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+type FileCardProps = React.HTMLAttributes<HTMLDivElement> & {
+    fileName: string;
+    meta?: string;
+    icon?: React.ReactNode;
+    onAction?: React.MouseEventHandler<HTMLButtonElement>;
+};
+declare function FileCard({ fileName, meta, icon, onAction, className, ...props }: FileCardProps): react_jsx_runtime.JSX.Element;
+
+type TabItem = {
+    label: string;
+    value: string;
+};
+type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    items: TabItem[];
+    value: string;
+    onChange: (value: string) => void;
+};
+declare function TabBar({ items, value, onChange, className, ...props }: TabBarProps): react_jsx_runtime.JSX.Element;
+
+type OperationStatusType = 'active' | 'completed' | 'failed' | 'pending';
+type OperationStatusProps = React.HTMLAttributes<HTMLSpanElement> & {
+    status: OperationStatusType;
+    label?: string;
+};
+declare function OperationStatus({ status, label, className, ...props }: OperationStatusProps): react_jsx_runtime.JSX.Element;
+
+type ValidationAlertVariant = 'error' | 'warning' | 'info';
+type ValidationAlertProps = {
+    title: string;
+    message: string;
+    onClose?: () => void;
+    variant?: ValidationAlertVariant;
+    className?: string;
+};
+declare function ValidationAlert({ title, message, onClose, variant, className, }: ValidationAlertProps): react_jsx_runtime.JSX.Element;
+
+type SelectionCardProps = {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+declare function SelectionCard({ title, description, icon, active, onClick, className, }: SelectionCardProps): react_jsx_runtime.JSX.Element;
+
+type OverlayProps = {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    children: React.ReactNode;
+};
+declare function Overlay({ open, title, onClose, children }: OverlayProps): react_jsx_runtime.JSX.Element | null;
+
+type ModalProps = {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    onConfirm?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    children: React.ReactNode;
+};
+declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+type GlassPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    onClose?: () => void;
+};
+declare function GlassPopover({ title, onClose, children, className, ...props }: GlassPopoverProps): react_jsx_runtime.JSX.Element;
+
+type AccordionProps = React.HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    icon?: React.ReactNode;
+};
+declare function Accordion({ title, children, defaultOpen, icon, className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant;
+    dot?: boolean;
+};
+declare function Badge({ variant, dot, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: BannerVariant;
+    onClose?: () => void;
+    icon?: React.ReactNode;
+};
+declare function Banner({ variant, onClose, icon, children, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
+
+type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    indeterminate?: boolean;
+};
+declare function Checkbox({ checked, onChange, disabled, label, indeterminate, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+type RadioProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    checked?: boolean;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    value: string;
+};
+declare function Radio({ checked, onChange, disabled, label, name, value, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+
+type ToggleProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+};
+declare function Toggle({ checked, onChange, disabled, label, className, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
+    placeholder?: string;
+    options?: SelectOption[];
+    onChange?: (value: string) => void;
+    filled?: boolean;
+};
+declare function Select({ value, placeholder, options, onChange, disabled, filled, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+type SelectGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+};
+declare function SelectGroup({ label, helperText, error, children, className, ...props }: SelectGroupProps): react_jsx_runtime.JSX.Element;
+
+type SegmentedControlItem = {
+    label: string;
+    value: string;
+};
+type SegmentedControlProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    items: SegmentedControlItem[];
+    value: string;
+    onChange: (value: string) => void;
+};
+declare function SegmentedControl({ items, value, onChange, className, ...props }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+
+type TableColumn = {
+    key: string;
+    header: string;
+    width?: string;
+    render?: (value: any, row: TableRow) => React.ReactNode;
+};
+type TableRow = Record<string, any>;
+type DataTableProps = React.HTMLAttributes<HTMLTableElement> & {
+    columns: TableColumn[];
+    data: TableRow[];
+    onRowClick?: (row: TableRow) => void;
+    emptyMessage?: string;
+    className?: string;
+};
+declare function DataTable({ columns, data, onRowClick, emptyMessage, className, ...props }: DataTableProps): react_jsx_runtime.JSX.Element;
+
+type PaginationVariant = 'full' | 'mini';
+type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    variant?: PaginationVariant;
+    className?: string;
+};
+declare function Pagination({ currentPage, totalPages, onPageChange, variant, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+type StatusDotVariant = 'success' | 'warning' | 'error' | 'default';
+type StatusDotProps = React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: StatusDotVariant;
+    label: string;
+};
+declare function StatusDot({ variant, label, className, ...props }: StatusDotProps): react_jsx_runtime.JSX.Element;
+
+type DropzoneProps = React.HTMLAttributes<HTMLDivElement> & {
+    onDrop?: (files: File[]) => void;
+    accept?: string;
+    title?: string;
+    hint?: string;
+    disabled?: boolean;
+};
+declare function Dropzone({ onDrop, accept, title, hint, disabled, className, ...props }: DropzoneProps): react_jsx_runtime.JSX.Element;
+
+type SplitPaneProps = React.HTMLAttributes<HTMLDivElement> & {
+    leftPanel: React.ReactNode;
+    rightPanel: React.ReactNode;
+    leftTitle?: string;
+    rightTitle?: string;
+    defaultSplit?: number;
+};
+declare function SplitPane({ leftPanel, rightPanel, leftTitle, rightTitle, defaultSplit, className, ...props }: SplitPaneProps): react_jsx_runtime.JSX.Element;
+
+type PricingCardProps = React.HTMLAttributes<HTMLDivElement> & {
+    planName: string;
+    price: string;
+    period?: string;
+    description?: string;
+    features: string[];
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+    highlighted?: boolean;
+};
+declare function PricingCard({ planName, price, period, description, features, ctaLabel, onCtaClick, highlighted, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
+
+type OnboardingPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+    step: number;
+    totalSteps: number;
+    title: string;
+    description: string;
+    onNext?: () => void;
+    onSkip?: () => void;
+    nextLabel?: string;
+};
+declare function OnboardingPopover({ step, totalSteps, title, description, onNext, onSkip, nextLabel, className, ...props }: OnboardingPopoverProps): react_jsx_runtime.JSX.Element;
+
+type CreditsIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    remaining: number;
+    label?: string;
+};
+declare function CreditsIndicator({ remaining, label, className, ...props }: CreditsIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type LanguageSelectorOption = {
+    value: string;
+    label: string;
+};
+type LanguageSelectorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    value: string;
+    options?: LanguageSelectorOption[];
+    onChange?: (value: string) => void;
+};
+declare function LanguageSelector({ value, options, onChange, className, ...props }: LanguageSelectorProps): react_jsx_runtime.JSX.Element;
+
+type UserProfileMenuItem = {
+    icon?: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+};
+type UserProfilePopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    email: string;
+    avatar?: React.ReactNode;
+    menuItems?: UserProfileMenuItem[];
+    onLogout?: () => void;
+    credits?: number;
+};
+declare function UserProfilePopover({ name, email, avatar, menuItems, onLogout, credits, className, ...props }: UserProfilePopoverProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonVariant, Card, type CardLevel, type CardProps, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry };