@stackone/malachite 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,27 +1,11 @@
-import { CodeTextProps } from './codeText';
 import { Control } from 'react-hook-form';
-import { createStyles } from 'antd-style';
-import { CSSObject } from 'antd-style';
-import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
-import { EllipsisTextProps } from './ellipsisText';
 import { FC } from 'react';
 import { FieldPath } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form';
-import { FormInstance } from 'antd';
-import { FormSectionTitleProps } from './formSectionText';
-import { HandWrittenProps } from './handWritten';
-import { JSX as JSX_2 } from 'react';
-import { LinkProps } from './link';
-import { PageTitleProps } from './pageTitle';
-import * as React_2 from 'react';
 import { ReactNode } from 'react';
-import { SecondaryTextProps } from './secondaryText';
-import { SectionTitleProps } from './sectionTitle';
-import { StatisticLabelProps } from './statisticLabel';
-import { StatisticValueProps } from './statisticValue';
-import { TerminalTextProps } from './terminalText';
-import { TextProps } from './text';
+import { UseFormReturn } from 'react-hook-form';
 
 export declare const Alert: default_2.FC<AlertProps>;
 
@@ -29,18 +13,67 @@ declare interface AlertProps {
     type?: AlertType;
     message: string;
     hasMargin?: boolean;
+    className?: string;
 }
 
-declare type AlertType = 'success' | 'error' | 'warning' | 'info';
+declare type AlertType = 'info' | 'success' | 'error' | 'warning';
+
+/**
+ * Apply a custom theme while preserving the current theme mode (light/dark)
+ */
+export declare function applyCustomTheme(customTheme: PartialMalachiteTheme): void;
+
+/**
+ * Apply the dark theme
+ */
+export declare function applyDarkTheme(): void;
+
+/**
+ * Apply the default (light) theme
+ */
+export declare function applyLightTheme(): void;
+
+/**
+ * Apply a custom theme to Malachite components
+ * This function sets CSS custom properties that will be used by all Malachite components
+ * Works with Shadow DOM isolation by applying to all registered shadow roots
+ */
+export declare function applyTheme(theme: PartialMalachiteTheme): void;
+
+export declare const BaseFormComponent: default_2.FC<BaseFormComponentProps>;
+
+declare interface BaseFormComponentProps {
+    label?: string;
+    description?: string;
+    hint?: string;
+    tooltip?: string;
+    required?: boolean;
+    key?: string;
+    name: FieldPath<FieldValues>;
+    defaultValue?: string;
+    loading?: boolean;
+    formControl?: Control<FieldValues, unknown>;
+    loadingComponent: default_2.ReactNode;
+    children?: default_2.ReactNode;
+}
 
 export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 declare interface ButtonDefinition {
     label: string;
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | void;
+    onClick?: (e?: default_2.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | void;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: default_2.ReactNode;
+    tooltip?: string;
+}
+
+declare interface ButtonDefinition_2 {
+    label: string;
+    onClick?: (e?: default_2.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | void;
     disabled?: boolean;
     danger?: boolean;
-    icon?: React.ReactNode;
+    icon?: default_2.ReactNode;
     tooltip?: string;
 }
 
@@ -52,24 +85,26 @@ declare interface ButtonListProps {
         children: ReactNode;
         onClick: () => void;
     }>;
+    className?: string;
 }
 
-declare interface ButtonProps {
-    type?: ButtonType;
+declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
     disabled?: boolean;
-    htmlType?: 'button' | 'submit' | 'reset';
     icon?: default_2.ReactNode;
-    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    iconPosition?: 'start' | 'end';
     flexGrow?: boolean;
-    children?: default_2.ReactNode;
-    loading?: boolean;
-    tooltip?: string;
-    onClick?: (e?: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
     fill?: boolean;
-    iconPosition?: 'start' | 'end';
+    tooltip?: string;
+    children?: default_2.ReactNode;
+    onClick?: default_2.MouseEventHandler<HTMLButtonElement>;
 }
 
-declare type ButtonType = 'filled' | 'outline' | 'destructive' | 'green' | 'orange' | 'red' | 'ghost' | 'no-style';
+declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';
+
+declare type ButtonVariant = 'filled' | 'outline' | 'destructive' | 'success' | 'warning' | 'error' | 'ghost' | 'no-style';
 
 export declare const Card: default_2.FC<CardProps>;
 
@@ -88,110 +123,126 @@ declare interface CardProps {
     alignSelf?: 'center';
     height?: string;
     footer?: default_2.ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
 }
 
-declare interface Colors {
-    orangeForeground: string;
-    orangeBackground: string;
-    redForeground: string;
-    redBackground: string;
-    greenForeground: string;
-    greenBackground: string;
-    primaryForeground: string;
-    primaryBackground: string;
-    primaryShadow: string;
-    primaryBorder: string;
-    primaryBorderHover: string;
-    secondaryForeground: string;
-    secondaryBackground: string;
-    secondaryShadow: string;
-    secondaryBorder: string;
-    secondaryBorderHover: string;
-    destructiveBackground: string;
-    destructiveForeground: string;
-    destructiveShadow: string;
-    destructiveBorder: string;
-    background: string;
-    dimmedBackground: string;
-    dimmedForeground: string;
-    dimmedForegroundSecondary: string;
-    quoteBackground: string;
-    quoteForeground: string;
-    linkForeground: string;
-    linkForegroundHover: string;
+declare interface CodeTextProps {
+    bold?: boolean;
+    size?: FontSize;
+    hasBorder?: boolean;
+    color?: string;
+    backgroundColor?: string;
+    children: default_2.ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
 }
 
 export declare const CustomIcons: {
-    AccountIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    AccountsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    AddIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    AdvancedLogsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ApiKeysIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ArrowLeftIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    Authentication: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    BiDirectionalArrowsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CaretDownIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CaretLeftIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CaretRightIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CaretUpIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ChangePasswordIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CheckCircleFilledIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ClearIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CloseIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CommandKeyIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CopyIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CsvIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    CustomFieldIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    DashboardIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    DateIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    DisabledIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    DisableIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    DocIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    DownloadIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    EditIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    EnableIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    EnumIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ExpandIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    FieldMappingIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    FilledCaretDownIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    FilledCaretRightIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    FilterIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ForbiddenIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ForwardArrowIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    InfoIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    IntegrationsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    KeyIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    LogsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    MagicWandIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ManageTeamIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ManualWebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    MembersIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ModalIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    NavbarCollapseIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    NavbarExpandIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    NotFoundIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    PlusIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    PreviewIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ProgrammaticWebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    PulseIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    RefreshIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    RejectIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    ReloadIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    RequiredFieldIndicatorIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SecurityIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SettingsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SignOutIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SliderIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SortIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SourceIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    SyntheticWebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    TrashIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    UploadIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    WebhookEventsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    WebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
-    WebhookSigningSecretIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    AccountIcon: FC<IconProps>;
+    AccountsIcon: FC<IconProps>;
+    AddIcon: FC<IconProps>;
+    AdvancedLogsIcon: FC<IconProps>;
+    ApiKeysIcon: FC<IconProps>;
+    ArrowLeftIcon: FC<IconProps>;
+    AuthenticationIcon: FC<IconProps>;
+    BiDirectionalArrowsIcon: FC<IconProps>;
+    CaretDownIcon: FC<IconProps>;
+    CaretLeftIcon: FC<IconProps>;
+    CaretRightIcon: FC<IconProps>;
+    CaretUpIcon: FC<IconProps>;
+    ChangePasswordIcon: FC<IconProps>;
+    CheckCircleFilled: FC<IconProps>;
+    ClearIcon: FC<IconProps>;
+    CloseIcon: FC<IconProps>;
+    CommandKeyIcon: FC<IconProps>;
+    CopyIcon: FC<IconProps>;
+    CsvIcon: FC<IconProps>;
+    CustomFieldIcon: FC<IconProps>;
+    DashboardIcon: FC<IconProps>;
+    DateIcon: FC<IconProps>;
+    DisabledIcon: FC<IconProps>;
+    DisableIcon: FC<IconProps>;
+    DocIcon: FC<IconProps>;
+    DownloadIcon: FC<IconProps>;
+    EditIcon: FC<IconProps>;
+    EnableIcon: FC<IconProps>;
+    EnumIcon: FC<IconProps>;
+    ErrorCircleFilled: FC<IconProps>;
+    ExpandIcon: FC<IconProps>;
+    EyeClosedIcon: FC<IconProps>;
+    EyeIcon: FC<IconProps>;
+    FieldMappingIcon: FC<IconProps>;
+    FilledCaretDownIcon: FC<IconProps>;
+    FilledCaretRightIcon: FC<IconProps>;
+    FilterIcon: FC<IconProps>;
+    ForbiddenIcon: FC<IconProps>;
+    ForwardArrowIcon: FC<IconProps>;
+    InfoIcon: FC<IconProps>;
+    InfoCircleFilled: FC<IconProps>;
+    IntegrationsIcon: FC<IconProps>;
+    KeyIcon: FC<IconProps>;
+    LogsIcon: FC<IconProps>;
+    MagicWandIcon: FC<IconProps>;
+    ManageTeamIcon: FC<IconProps>;
+    ManualWebhookIcon: FC<IconProps>;
+    MembersIcon: FC<IconProps>;
+    ModalIcon: FC<IconProps>;
+    NavbarCollapseIcon: FC<IconProps>;
+    NavbarExpandIcon: FC<IconProps>;
+    NotFoundIcon: FC<IconProps>;
+    PlusIcon: FC<IconProps>;
+    PreviewIcon: FC<IconProps>;
+    ProgrammaticWebhookIcon: FC<IconProps>;
+    PulseIcon: FC<IconProps>;
+    RefreshIcon: FC<IconProps>;
+    RejectIcon: FC<IconProps>;
+    ReloadIcon: FC<IconProps>;
+    RequiredFieldIndicatorIcon: FC<IconProps>;
+    SecurityIcon: FC<IconProps>;
+    SettingsIcon: FC<IconProps>;
+    SignOutIcon: FC<IconProps>;
+    SliderIcon: FC<IconProps>;
+    SortIcon: FC<IconProps>;
+    SourceIcon: FC<IconProps>;
+    SyntheticWebhookIcon: FC<IconProps>;
+    TrashIcon: FC<IconProps>;
+    UploadIcon: FC<IconProps>;
+    WarningCircleFilled: FC<IconProps>;
+    WebhookEventsIcon: FC<IconProps>;
+    WebhookIcon: FC<IconProps>;
+    WebhookSigningSecretIcon: FC<IconProps>;
 };
 
+export declare const darkTheme: MalachiteTheme;
+
+export declare const defaultTheme: MalachiteTheme;
+
+export declare const Dropdown: default_2.FC<DropdownProps>;
+
+export declare interface DropdownItem {
+    id: string;
+    label: string;
+}
+
+export declare interface DropdownProps {
+    items: DropdownItem[];
+    onItemSelected?: (id?: string) => void;
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+}
+
+declare interface EllipsisTextProps {
+    children: default_2.ReactNode;
+    tooltip?: default_2.ReactNode | string;
+    maxWidth?: string;
+    color?: TextColor;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 export declare const Flex: default_2.FC<FlexProps>;
 
 export declare enum FlexAlign {
@@ -231,10 +282,13 @@ declare interface FlexProps {
     width?: string;
     id?: string;
     children?: default_2.ReactNode;
+    className?: string;
 }
 
 declare type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
+declare type FontWeight = 'normal' | 'semi-bold' | 'bold';
+
 export declare const FooterLinks: default_2.FC<FooterLinksProps>;
 
 declare interface FooterLinksProps {
@@ -242,15 +296,83 @@ declare interface FooterLinksProps {
     showDocsSupport?: boolean;
 }
 
+/**
+ * Form component that escapes Shadow DOM to avoid "Invalid hook call" errors.
+ *
+ * This component automatically renders outside Shadow DOM boundaries, allowing
+ * react-hook-form hooks to work properly while maintaining the styling and
+ * functionality expected from a form component.
+ *
+ * @example
+ * // Works inside MalachiteContext - form will escape Shadow DOM automatically
+ * <MalachiteContext>
+ *   <Form
+ *     defaultValues={{ username: '', email: '' }}
+ *     onFinish={(data) => console.log(data)}
+ *   >
+ *     <Input name="username" label="Username" required />
+ *     <Input name="email" label="Email" required />
+ *     <Button type="submit">Submit</Button>
+ *   </Form>
+ * </MalachiteContext>
+ *
+ * @example
+ * // Advanced usage with external form instance
+ * const form = useForm({ defaultValues: { username: '' } });
+ *
+ * <MalachiteContext>
+ *   <Form formInstance={form} onFinish={onSubmit}>
+ *     <Input name="username" />
+ *     <Button type="submit">Submit</Button>
+ *   </Form>
+ * </MalachiteContext>
+ */
 export declare const Form: default_2.FC<FormProps>;
 
+export declare const FormItem: default_2.FC<FormItemProps>;
+
+declare interface FormItemProps {
+    control: Control<FieldValues, unknown>;
+    name: FieldPath<FieldValues>;
+    children: default_2.ReactNode;
+}
+
 declare interface FormProps {
     children: default_2.ReactNode;
-    onFinish?: () => void;
-    formInstance?: FormInstance;
+    onFinish?: (data: FieldValues) => void;
+    formInstance?: UseFormReturn<FieldValues>;
+    defaultValues?: FieldValues;
+    className?: string;
+}
+
+declare interface FormSectionTitleProps {
+    children: default_2.ReactNode;
+    className?: string;
     style?: default_2.CSSProperties;
 }
 
+/**
+ * Get current theme values from CSS custom properties
+ */
+export declare function getCurrentTheme(): MalachiteTheme;
+
+/**
+ * Get current theme mode from localStorage
+ */
+export declare function getCurrentThemeMode(): 'light' | 'dark';
+
+declare interface IconProps {
+    size?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+}
+
+/**
+ * Initialize the theme system - should be called on app startup
+ */
+export declare function initializeTheme(): void;
+
 export declare const Input: default_2.FC<InputProps>;
 
 declare interface InputProps {
@@ -261,9 +383,9 @@ declare interface InputProps {
     icon?: default_2.ReactNode;
     readOnly?: boolean;
     name: FieldPath<FieldValues> | string;
-    type?: 'text' | 'password' | 'number';
+    type?: InputType;
     description?: string;
-    size?: SizeType;
+    size?: InputSize;
     required?: boolean;
     error?: boolean;
     loading?: boolean;
@@ -276,9 +398,163 @@ declare interface InputProps {
     buttons?: ButtonDefinition[];
     onCopyClick?: () => void;
     onChange?: (value: string) => void;
+    onBlur?: () => void;
+}
+
+declare type InputSize = 'small' | 'medium' | 'large';
+
+declare type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';
+
+declare interface LinkProps {
+    href: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+    children: default_2.ReactNode;
+    className?: string;
+    showRightBorder?: boolean;
+    showLeftBorder?: boolean;
+    padding?: boolean;
+    color?: 'default' | 'dimmed';
+    fontSize?: 'sm' | 'base';
 }
 
-export declare const Markdown: default_2.FC<MarkdownProps>;
+/**
+ * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.
+ * Use this to wrap groups of Malachite components instead of each component managing its own Shadow DOM.
+ *
+ * @example
+ * <MalachiteContext>
+ *   <Button variant="filled">Click me</Button>
+ *   <Card>
+ *     <CardContent>Hello world</CardContent>
+ *   </Card>
+ * </MalachiteContext>
+ */
+export declare const MalachiteContext: default_2.FC<MalachiteContextProps>;
+
+declare interface MalachiteContextProps {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface MalachiteTheme {
+    shadows: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        default: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    colors: {
+        shadowColor: string;
+        shadowOpacity: number;
+        card: {
+            background: string;
+            foreground: string;
+            border: string;
+            shadow: string;
+            dimmedBackground: string;
+            headerBackground: string;
+            footerBackground: string;
+        };
+        alert: {
+            info: {
+                background: string;
+                foreground: string;
+            };
+            success: {
+                background: string;
+                foreground: string;
+            };
+            error: {
+                background: string;
+                foreground: string;
+            };
+            warning: {
+                background: string;
+                foreground: string;
+            };
+        };
+        tooltip: {
+            background: string;
+            foreground: string;
+            border: string;
+            shadow: string;
+        };
+        primary: {
+            background: string;
+            foreground: string;
+            border: string;
+            borderHover: string;
+        };
+        outline: {
+            foreground: string;
+        };
+        secondary: {
+            background: string;
+            foreground: string;
+            border: string;
+            borderHover: string;
+        };
+        destructive: {
+            background: string;
+            foreground: string;
+            border: string;
+            borderHover: string;
+            shadow: string;
+            shadowLight: string;
+            shadowMedium: string;
+        };
+        success: {
+            background: string;
+            foreground: string;
+            border: string;
+            borderHover: string;
+            backgroundGlass: string;
+            shadowLight: string;
+            shadowMedium: string;
+        };
+        warning: {
+            background: string;
+            foreground: string;
+            border: string;
+            borderHover: string;
+            backgroundGlass: string;
+            shadowLight: string;
+            shadowMedium: string;
+        };
+        error: {
+            background: string;
+            foreground: string;
+            border: string;
+            borderHover: string;
+            backgroundGlass: string;
+            shadowLight: string;
+            shadowMedium: string;
+        };
+        buttonList: {
+            background: string;
+            foreground: string;
+            hoverBackground: string;
+            hoverForeground: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            dimmed: string;
+            placeholder: string;
+            destructive: string;
+            success: string;
+            warning: string;
+            error: string;
+            linkForeground: string;
+            linkForegroundHover: string;
+        };
+    };
+}
 
 declare interface MarkdownProps {
     text: string;
@@ -293,69 +569,169 @@ declare interface PaddedProps {
     horizontal: PaddingSize;
     children: default_2.ReactNode;
     fullHeight?: boolean;
+    className?: string;
 }
 
 declare type PaddingSize = 'small' | 'medium' | 'large' | 'none';
 
-declare type SizeType = 'small' | 'middle' | 'large';
+declare interface PageTitleProps {
+    children: default_2.ReactNode;
+    margin?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface PartialMalachiteTheme {
+    shadows?: Partial<MalachiteTheme['shadows']>;
+    colors?: {
+        shadowColor?: string;
+        shadowOpacity?: number;
+        card?: Partial<MalachiteTheme['colors']['card']>;
+        alert?: Partial<MalachiteTheme['colors']['alert']>;
+        tooltip?: Partial<MalachiteTheme['colors']['tooltip']>;
+        primary?: Partial<MalachiteTheme['colors']['primary']>;
+        outline?: Partial<MalachiteTheme['colors']['outline']>;
+        secondary?: Partial<MalachiteTheme['colors']['secondary']>;
+        destructive?: Partial<MalachiteTheme['colors']['destructive']>;
+        success?: Partial<MalachiteTheme['colors']['success']>;
+        warning?: Partial<MalachiteTheme['colors']['warning']>;
+        error?: Partial<MalachiteTheme['colors']['error']>;
+        buttonList?: Partial<MalachiteTheme['colors']['buttonList']>;
+        text?: Partial<MalachiteTheme['colors']['text']>;
+    };
+}
+
+/**
+ * Reset theme to default values
+ */
+export declare function resetTheme(): void;
+
+declare interface SecondaryTextProps {
+    children: default_2.ReactNode;
+    fontWeight?: FontWeight;
+    size?: FontSize;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+declare interface SectionTitleProps {
+    children: default_2.ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
+ * This is used internally by form components to escape Shadow DOM boundaries.
+ *
+ * The component finds the nearest non-shadow DOM ancestor and renders there.
+ */
+export declare const ShadowEscape: default_2.FC<ShadowEscapeProps>;
+
+declare interface ShadowEscapeProps {
+    children: default_2.ReactNode;
+    className?: string;
+}
 
 export declare const Spacer: default_2.FC<SpacerProps>;
 
 declare interface SpacerProps {
     direction?: 'horizontal' | 'vertical';
     size?: number;
-    align?: 'center' | 'start' | 'end' | 'baseline';
+    align?: 'center' | 'start' | 'end' | 'baseline' | 'stretch';
     justifyContent?: 'space-between' | 'end' | 'center';
     padding?: string;
     children: default_2.ReactNode;
     id?: string;
     fullHeight?: boolean;
     fullWidth?: boolean;
+    className?: string;
 }
 
 export declare const Spinner: default_2.FC<SpinnerProps>;
 
 declare interface SpinnerProps {
     size?: 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';
+    className?: string;
+    style?: default_2.CSSProperties;
 }
 
-declare type TextColor = 'regular' | 'dimmed' | 'primary' | 'secondary' | 'destructive' | 'green' | 'red' | 'orange';
+declare interface StatisticLabelProps {
+    bold?: boolean;
+    children: default_2.ReactNode;
+    secondary?: boolean;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
 
-declare type Theme = 'dark' | 'light' | 'system';
+declare interface StatisticValueProps {
+    children: default_2.ReactNode;
+    secondary?: boolean;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
 
-export declare function ThemeProvider({ children, theme, ...props }: ThemeProviderProps): React_2.JSX.Element;
+declare interface TerminalTextProps {
+    bold?: boolean;
+    size?: FontSize;
+    children: default_2.ReactNode;
+    color?: TextColor;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
 
-declare type ThemeProviderProps = {
-    children: React_2.ReactNode;
-    theme?: Theme;
-};
+export declare const TextArea: default_2.FC<TextAreaProps>;
 
-declare type ThemeProviderState = {
-    theme: Theme;
-    colors: Colors;
-    useStyles: ReturnType<typeof createStyles<{
-        colors: Colors;
-    }, Partial<{
-        'button-orange': CSSObject;
-        'button-red': CSSObject;
-        'button-green': CSSObject;
-        'button-filled': CSSObject;
-        'button-outline': CSSObject;
-        'button-destructive': CSSObject;
-        'button-ghost': CSSObject;
-        'button-no-style': CSSObject;
-        card: CSSObject;
-        'input-wrapper': CSSObject;
-        terminalText: CSSObject;
-        link: CSSObject;
-        buttonList: CSSObject;
-        buttonListItem: CSSObject;
-        'alert-info': CSSObject;
-        'alert-success': CSSObject;
-        'alert-error': CSSObject;
-        'alert-warning': CSSObject;
-    }>>>;
-};
+declare interface TextAreaProps {
+    label?: string;
+    hint?: string;
+    tooltip?: string;
+    placeholder?: string;
+    icon?: default_2.ReactNode;
+    readOnly?: boolean;
+    name: FieldPath<FieldValues> | string;
+    description?: string;
+    size?: TextAreaSize;
+    required?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    prefixValue?: string;
+    prefixSecondaryValue?: string;
+    ellipsis?: boolean;
+    formControl?: Control<FieldValues, unknown>;
+    buttons?: ButtonDefinition_2[];
+    onCopyClick?: () => void;
+    onChange?: (value: string) => void;
+    value?: string;
+    onBlur?: () => void;
+    rows?: number;
+    maxLength?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+}
+
+declare type TextAreaSize = 'small' | 'medium' | 'large';
+
+declare type TextColor = 'primary' | 'secondary' | 'dimmed' | 'destructive' | 'success' | 'warning' | 'error' | 'link';
+
+declare interface TextProps {
+    color?: TextColor;
+    size?: FontSize;
+    underline?: boolean;
+    fontWeight?: FontWeight;
+    children: default_2.ReactNode;
+    tooltip?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * Toggle between light and dark themes
+ */
+export declare function toggleTheme(): 'light' | 'dark';
 
 export declare const Tooltip: default_2.FC<TooltipProps>;
 
@@ -364,23 +740,22 @@ declare interface TooltipProps {
     children: default_2.ReactNode;
     delay?: number;
     wrapChildren?: boolean;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
 }
 
 export declare const Typography: {
-    Text: FC<TextProps>;
+    CodeText: FC<CodeTextProps>;
+    EllipsisText: FC<EllipsisTextProps>;
+    FormSectionTitle: FC<FormSectionTitleProps>;
+    LinkText: FC<LinkProps>;
+    MarkdownBlock: FC<MarkdownProps>;
     PageTitle: FC<PageTitleProps>;
+    SecondaryText: FC<SecondaryTextProps>;
+    SectionTitle: FC<SectionTitleProps>;
     StatisticLabel: FC<StatisticLabelProps>;
     StatisticValue: FC<StatisticValueProps>;
-    SectionTitle: FC<SectionTitleProps>;
-    SecondaryText: FC<SecondaryTextProps>;
-    EllipsisText: FC<EllipsisTextProps>;
-    CodeText: FC<CodeTextProps>;
-    FormSectionTitle: FC<FormSectionTitleProps>;
     TerminalText: FC<TerminalTextProps>;
-    HandWritten: FC<HandWrittenProps>;
-    Link: ({ children, href, target, rel }: LinkProps) => JSX_2.Element;
+    Text: FC<TextProps>;
 };
 
-export declare const useTheme: () => ThemeProviderState;
-
 export { }