@graphty/compact-mantine 0.0.1 → 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,930 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react';
+import { MantineColorShade } from '@mantine/core';
+import { MantineColorsTuple } from '@mantine/core';
+import { MantineRadius } from '@mantine/core';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefObject } from 'react';
+import { VariantColorsResolver } from '@mantine/core';
+
+/**
+ * Gradient color stop.
+ */
+export declare interface ColorStop {
+    /** Unique identifier for stable React keys */
+    id: string;
+    /** Stop position (0-1) */
+    offset: number;
+    /** Stop color in hex format */
+    color: string;
+}
+
+/**
+ * Compact color input with optional opacity support.
+ * Supports both controlled and uncontrolled modes.
+ * Shows muted styling when using default values, with reset button when explicit.
+ * Figma-style layout: [color swatch] [hex input] | [opacity%] [reset]
+ * @param root0 - Component props
+ * @param root0.color - Hex color value - undefined means using defaultColor
+ * @param root0.defaultColor - Default color shown when color is undefined
+ * @param root0.opacity - Opacity value 0-100 - undefined means using defaultOpacity
+ * @param root0.defaultOpacity - Default opacity shown when opacity is undefined
+ * @param root0.onColorChange - Called when color changes (optional for uncontrolled mode)
+ * @param root0.onOpacityChange - Called when opacity changes (optional for uncontrolled mode)
+ * @param root0.label - Optional label displayed above the input
+ * @param root0.showOpacity - Control visibility of opacity input
+ * @returns The compact color input component
+ */
+export declare function CompactColorInput({ color, defaultColor, opacity, defaultOpacity, onColorChange, onOpacityChange, label, showOpacity, }: CompactColorInputProps): default_2.JSX.Element;
+
+/**
+ * Props for compact color input with optional opacity support.
+ * Supports both controlled and uncontrolled modes via useUncontrolled pattern.
+ * When color/opacity is undefined, shows the default value with muted styling and a reset button.
+ */
+export declare interface CompactColorInputProps {
+    /** Hex color value - undefined means using defaultColor (controlled mode) */
+    color?: string | undefined;
+    /** Default color shown when color is undefined */
+    defaultColor: string;
+    /** Opacity value 0-100 - undefined means using defaultOpacity (controlled mode) */
+    opacity?: number | undefined;
+    /** Default opacity shown when opacity is undefined */
+    defaultOpacity?: number;
+    /** Called when color changes - receives undefined when reset (optional for uncontrolled mode) */
+    onColorChange?: (color: string | undefined) => void;
+    /** Called when opacity changes - receives undefined when reset (optional for uncontrolled mode) */
+    onOpacityChange?: (opacity: number | undefined) => void;
+    /** Optional label displayed above the input */
+    label?: string;
+    /** Control visibility of opacity input (defaults to true) */
+    showOpacity?: boolean;
+}
+
+/**
+ * Color configuration for the compact theme.
+ */
+export declare const compactColors: {
+    dark: MantineColorsTuple;
+};
+
+/**
+ * Custom dark color palette optimized for dense UIs.
+ *
+ * Usage:
+ * - 0-2: Light tones (text, borders in light mode)
+ * - 3-5: Mid tones (secondary elements)
+ * - 6-7: Dark tones (input backgrounds in dark mode)
+ * - 8-9: Darkest tones (main backgrounds in dark mode)
+ */
+export declare const compactDarkColors: MantineColorsTuple;
+
+/**
+ * Mantine theme with "compact" size support for dense UIs.
+ *
+ * Compact size specifications:
+ * - Input height: 24px
+ * - Font size: 11px
+ * - No borders
+ * - Semantic color backgrounds
+ * @example
+ * ```tsx
+ * import { MantineProvider, TextInput } from '@mantine/core';
+ * import { compactTheme } from '@graphty/compact-mantine';
+ *
+ * function App() {
+ *     return (
+ *         <MantineProvider theme={compactTheme}>
+ *             <TextInput size="compact" label="Name" />
+ *         </MantineProvider>
+ *     );
+ * }
+ * ```
+ */
+export declare const compactTheme: {
+    focusRing?: "auto" | "always" | "never" | undefined;
+    scale?: number | undefined;
+    fontSmoothing?: boolean | undefined;
+    white?: string | undefined;
+    black?: string | undefined;
+    colors?: {
+        [x: string & {}]: MantineColorsTuple | undefined;
+        blue?: MantineColorsTuple | undefined;
+        cyan?: MantineColorsTuple | undefined;
+        gray?: MantineColorsTuple | undefined;
+        green?: MantineColorsTuple | undefined;
+        indigo?: MantineColorsTuple | undefined;
+        lime?: MantineColorsTuple | undefined;
+        orange?: MantineColorsTuple | undefined;
+        pink?: MantineColorsTuple | undefined;
+        red?: MantineColorsTuple | undefined;
+        teal?: MantineColorsTuple | undefined;
+        violet?: MantineColorsTuple | undefined;
+        yellow?: MantineColorsTuple | undefined;
+        dark?: MantineColorsTuple | undefined;
+        grape?: MantineColorsTuple | undefined;
+    } | undefined;
+    primaryShade?: MantineColorShade | {
+        light?: MantineColorShade | undefined;
+        dark?: MantineColorShade | undefined;
+    } | undefined;
+    primaryColor?: string | undefined;
+    variantColorResolver?: VariantColorsResolver | undefined;
+    autoContrast?: boolean | undefined;
+    luminanceThreshold?: number | undefined;
+    fontFamily?: string | undefined;
+    fontFamilyMonospace?: string | undefined;
+    headings?: {
+        fontFamily?: string | undefined;
+        fontWeight?: string | undefined;
+        textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
+        sizes?: {
+            h1?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h2?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h3?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h4?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h5?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h6?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+        } | undefined;
+    } | undefined;
+    radius?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    defaultRadius?: MantineRadius | undefined;
+    spacing?: {
+        [x: number]: string | undefined;
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    fontSizes?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    lineHeights?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    breakpoints?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    shadows?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    respectReducedMotion?: boolean | undefined;
+    cursorType?: "default" | "pointer" | undefined;
+    defaultGradient?: {
+        from?: string | undefined;
+        to?: string | undefined;
+        deg?: number | undefined;
+    } | undefined;
+    activeClassName?: string | undefined;
+    focusClassName?: string | undefined;
+    components?: {
+        [x: string]: {
+            classNames?: any;
+            styles?: any;
+            vars?: any;
+            defaultProps?: any;
+        } | undefined;
+    } | undefined;
+    other?: {
+        [x: string]: any;
+    } | undefined;
+};
+
+/**
+ * A section header with label for grouping related controls.
+ * Provides consistent Figma-style styling with separator lines.
+ * @param root0 - Component props
+ * @param root0.label - The label text for the group header
+ * @param root0.actions - Optional action buttons to display in the header
+ * @param root0.children - Child controls to render in the group
+ * @returns The control group component
+ */
+export declare function ControlGroup({ label, actions, children }: ControlGroupProps): default_2.JSX.Element;
+
+/**
+ * Props for the ControlGroup component.
+ */
+export declare interface ControlGroupProps {
+    /** Group label */
+    label: string;
+    /** Optional action buttons to display in the header */
+    actions?: ReactNode;
+    /** Group content */
+    children: ReactNode;
+}
+
+/**
+ * A collapsible section for grouping related controls.
+ * Provides consistent Figma-style styling with toggle functionality.
+ *
+ * When hasConfiguredValues is true, shows a small indicator dot
+ * to visually highlight that the section contains explicitly set values.
+ * @param root0 - Component props
+ * @param root0.label - The label text for the section header
+ * @param root0.defaultOpen - Whether the section is open by default
+ * @param root0.children - Child controls to render in the section
+ * @param root0.hasConfiguredValues - Whether this section has configured values
+ * @returns The control section component
+ */
+export declare function ControlSection({ label, defaultOpen, children, hasConfiguredValues, }: ControlSectionProps): default_2.JSX.Element;
+
+/**
+ * Props for the ControlSection component.
+ */
+export declare interface ControlSectionProps {
+    /** Section label displayed in header */
+    label: string;
+    /** Whether section is expanded by default */
+    defaultOpen?: boolean;
+    /** Visual indicator that child values differ from defaults */
+    hasConfiguredValues?: boolean;
+    /** Section content */
+    children: ReactNode;
+}
+
+/**
+ * A collapsible sub-section for grouping related advanced controls.
+ * Used for nested options like text effects, animation settings, etc.
+ * Provides a lighter visual weight than ControlSection.
+ * @param root0 - Component props
+ * @param root0.label - The label text for the sub-group header
+ * @param root0.defaultOpen - Whether the sub-group is open by default
+ * @param root0.children - Child controls to render in the sub-group
+ * @returns The control sub-group component
+ */
+export declare function ControlSubGroup({ label, defaultOpen, children }: ControlSubGroupProps): default_2.JSX.Element;
+
+/**
+ * Props for the ControlSubGroup component.
+ */
+export declare interface ControlSubGroupProps {
+    /** Group label */
+    label: string;
+    /** Whether group is expanded by default */
+    defaultOpen?: boolean;
+    /** Group content */
+    children: ReactNode;
+}
+
+/**
+ * Creates a new ColorStop with a unique ID.
+ * @param offset - The position of the stop (0-1)
+ * @param color - The color value in hex format
+ * @returns A new ColorStop with a unique ID
+ * @example
+ * const stop = createColorStop(0.5, '#ff0000');
+ * // { id: 'abc12345', offset: 0.5, color: '#ff0000' }
+ */
+export declare function createColorStop(offset: number, color: string): ColorStop;
+
+/**
+ * Creates default gradient stops for a new gradient configuration.
+ * @returns An array of two ColorStops (start and end)
+ */
+export declare function createDefaultGradientStops(): ColorStop[];
+
+/**
+ * Default color for new gradient stops.
+ */
+export declare const DEFAULT_GRADIENT_STOP_COLOR = "#888888";
+
+/**
+ * A checkbox toggle that shows/hides child controls.
+ * Supports both controlled and uncontrolled modes.
+ * Used for enabling/disabling effects like glow and outline.
+ * Provides clean visual indent for child content.
+ * @param root0 - Component props
+ * @param root0.label - The label for the toggle checkbox
+ * @param root0.checked - Whether the toggle is checked (controlled mode)
+ * @param root0.defaultChecked - Default checked state for uncontrolled mode
+ * @param root0.onChange - Called when the toggle state changes (optional for uncontrolled mode)
+ * @param root0.children - Child controls to show when checked
+ * @returns The effect toggle component
+ */
+export declare function EffectToggle({ label, checked, defaultChecked, onChange, children, }: EffectToggleProps): default_2.JSX.Element;
+
+/**
+ * Props for EffectToggle component.
+ * Supports both controlled and uncontrolled modes via useUncontrolled pattern.
+ */
+export declare interface EffectToggleProps {
+    /** Checkbox label */
+    label: string;
+    /** Whether effect is enabled (controlled mode) */
+    checked?: boolean;
+    /** Default checked state for uncontrolled mode */
+    defaultChecked?: boolean;
+    /** Called when checked state changes (optional for uncontrolled mode) */
+    onChange?: (checked: boolean) => void;
+    /** Content shown when checked */
+    children: ReactNode;
+}
+
+/**
+ * Editor for gradient color stops with optional direction control.
+ * Supports both controlled and uncontrolled modes.
+ * Allows adding/removing color stops and adjusting their positions.
+ * @param root0 - Component props
+ * @param root0.stops - Array of color stops (controlled mode)
+ * @param root0.defaultStops - Default stops for uncontrolled mode
+ * @param root0.direction - Gradient direction in degrees (controlled mode)
+ * @param root0.defaultDirection - Default direction for uncontrolled mode
+ * @param root0.showDirection - Whether to show direction control
+ * @param root0.onChange - Called when stops or direction change (optional for uncontrolled mode)
+ * @returns The gradient editor component
+ */
+export declare function GradientEditor({ stops, defaultStops, direction, defaultDirection, showDirection, onChange, }: GradientEditorProps): default_2.JSX.Element;
+
+/**
+ * Props for GradientEditor component.
+ * Supports both controlled and uncontrolled modes via useUncontrolled pattern.
+ */
+export declare interface GradientEditorProps {
+    /** Gradient color stops (controlled mode) */
+    stops?: ColorStop[];
+    /** Default stops for uncontrolled mode */
+    defaultStops?: ColorStop[];
+    /** Gradient direction in degrees (controlled mode) */
+    direction?: number;
+    /** Default direction for uncontrolled mode */
+    defaultDirection?: number;
+    /** Whether to show direction control */
+    showDirection?: boolean;
+    /** Called when stops or direction change (optional for uncontrolled mode) */
+    onChange?: (stops: ColorStop[], direction?: number) => void;
+}
+
+/**
+ * Check if a color string is valid hex format.
+ * @param color - Color string to validate
+ * @returns true if valid hex format (3, 4, 6, or 8 characters with optional #)
+ */
+export declare function isValidHex(color: string): boolean;
+
+/**
+ * Mantine spacing values for consistent component spacing.
+ */
+export declare const MANTINE_SPACING: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+
+/** Maximum value for hex alpha channel (0xFF = 255) */
+export declare const MAX_ALPHA_HEX = 255;
+
+/** Maximum opacity percentage value */
+export declare const MAX_OPACITY_PERCENT = 100;
+
+/**
+ * Converts an opacity percentage (0-100) to a hex alpha string (00-ff).
+ * @param opacity - Opacity as a percentage from 0 to 100
+ * @returns Two-character lowercase hex string representing alpha
+ * @example
+ * opacityToAlphaHex(100) // returns "ff"
+ * opacityToAlphaHex(50)  // returns "80"
+ * opacityToAlphaHex(0)   // returns "00"
+ */
+export declare function opacityToAlphaHex(opacity: number): string;
+
+/**
+ * Converts a hex alpha string (00-FF) to an opacity percentage (0-100).
+ * @param alphaHex - Two-character hex string representing alpha (00-FF)
+ * @returns Opacity as a percentage from 0 to 100
+ * @example
+ * parseAlphaFromHexa("FF") // returns 100
+ * parseAlphaFromHexa("80") // returns ~50
+ * parseAlphaFromHexa("00") // returns 0
+ */
+export declare function parseAlphaFromHexa(alphaHex: string): number;
+
+/**
+ * Parse HEXA color string (#RRGGBBAA) and extract RGB and opacity.
+ * @param hexa - Color string in hex or hexa format
+ * @returns Object with hex color and opacity percentage
+ */
+export declare function parseHexaColor(hexa: string): {
+    hex: string;
+    opacity: number;
+};
+
+export declare const Popout: typeof PopoutRoot & {
+    Trigger: typeof PopoutTrigger;
+    Panel: typeof PopoutPanel;
+    Content: typeof PopoutContent;
+};
+
+/**
+ * Gap in pixels between trigger and panel for root-level popouts.
+ */
+export declare const POPOUT_GAP = 8;
+
+/**
+ * Gap in pixels between parent and child panels for nested popouts.
+ * Used in Phase 6 for nested popout hierarchies.
+ */
+export declare const POPOUT_NESTED_GAP = 4;
+
+/**
+ * Z-index base value for popout panels.
+ * Ensures popouts appear above other UI elements.
+ */
+export declare const POPOUT_Z_INDEX_BASE = 1000;
+
+/**
+ * Alignment of the popout panel along the placement axis.
+ * - "start": Align to the start (top for left/right, left for top/bottom)
+ * - "center": Center along the axis
+ * - "end": Align to the end (bottom for left/right, right for top/bottom)
+ */
+declare type PopoutAlignment = "start" | "center" | "end";
+
+/**
+ * Container for popout panel content.
+ * Provides consistent padding and styling for panel content.
+ * @param props - Component props
+ * @param props.children - Content to display in the panel
+ * @returns The PopoutContent component
+ */
+declare function PopoutContent({ children }: PopoutContentProps): JSX.Element;
+
+/**
+ * Props for the PopoutContent component.
+ */
+export declare interface PopoutContentProps {
+    /** Content to display in the panel */
+    children: ReactNode;
+}
+
+/**
+ * Context value for a single Popout instance.
+ */
+export declare interface PopoutContextValue {
+    /** Unique identifier for this popout */
+    id: string;
+    /** Whether the panel is currently open */
+    isOpen: boolean;
+    /** Opens the panel */
+    open: () => void;
+    /** Closes the panel */
+    close: () => void;
+    /** Toggles the panel open/closed */
+    toggle: () => void;
+    /** Reference to the trigger element for positioning */
+    triggerRef: React.RefObject<HTMLElement | null>;
+    /** ID of the parent popout (if nested inside another popout) */
+    parentId: string | null;
+}
+
+/**
+ * Action button configuration for header actions.
+ */
+declare interface PopoutHeaderAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Icon element to display */
+    icon: ReactNode;
+    /** Accessible label for the action button */
+    label: string;
+    /** Callback when the action is clicked */
+    onClick: () => void;
+}
+
+/**
+ * Header configuration for Popout panel.
+ * Supports "title" variant (simple text header) and "tabs" variant (tabbed interface).
+ */
+export declare type PopoutHeaderConfig = PopoutTitleHeaderConfig | PopoutTabbedHeaderConfig;
+
+/**
+ * Props for the PopoutHeader component.
+ */
+export declare interface PopoutHeaderProps {
+    /** Header configuration */
+    config: PopoutHeaderConfig;
+    /** Called when close button is clicked */
+    onClose: () => void;
+    /** Props to apply to the drag handle area (Phase 2) */
+    dragTriggerProps?: Record<string, unknown>;
+    /** Action buttons to display in the header */
+    actions?: PopoutHeaderAction[];
+    /** Currently active tab ID (controlled by PopoutPanel for tabs variant) */
+    activeTab?: string;
+    /** Callback when active tab changes (controlled by PopoutPanel for tabs variant) */
+    onTabChange?: (tabId: string) => void;
+    /** ID for the title element (used for aria-labelledby) */
+    titleId?: string;
+}
+
+/**
+ * Manages coordination between multiple Popout instances.
+ * Provides context for z-index management, click-outside handling,
+ * Escape key behavior, and hierarchy tracking (Phase 6).
+ * @param props - Component props
+ * @param props.children - Child components that may contain Popout instances
+ * @returns The PopoutManager component
+ */
+export declare function PopoutManager({ children }: PopoutManagerProps): JSX.Element;
+
+/**
+ * Context value for the PopoutManager.
+ */
+export declare interface PopoutManagerContextValue {
+    /** Register a popout with the manager, providing a close callback and optional parent ID */
+    register: (id: string, closeCallback: () => void, parentId?: string | null) => void;
+    /** Unregister a popout from the manager */
+    unregister: (id: string) => void;
+    /** Get the current z-index for a popout */
+    getZIndex: (id: string) => number;
+    /** Bring a popout to the front (highest z-index) */
+    bringToFront: (id: string) => void;
+    /** Container element for portals - avoids assuming document.body */
+    portalContainer: HTMLElement | null;
+    /** Version counter that changes when z-index stack changes, for triggering re-renders */
+    zIndexVersion: number;
+    /** Close the focused (topmost) popout */
+    closeFocused: () => void;
+    /** Close all open popouts */
+    closeAll: () => void;
+    /** Check if there are any open popouts */
+    hasOpenPopouts: () => boolean;
+    /** Close a specific popout and all its descendants */
+    closeWithDescendants: (id: string) => void;
+    /** Close only descendants of a popout (not the popout itself) */
+    closeDescendants: (id: string) => void;
+    /** Close all siblings of a popout (same parent or both root-level). Also closes their descendants. */
+    closeSiblings: (id: string, parentId: string | null) => void;
+    /** Get the parent ID of a popout (null if root-level) */
+    getParentId: (id: string) => string | null;
+    /** Check if a popout is an ancestor of another popout */
+    isAncestor: (ancestorId: string, descendantId: string) => boolean;
+}
+
+/**
+ * Props for PopoutManager.
+ */
+declare interface PopoutManagerProps {
+    /** Child components that may contain Popout instances */
+    children: ReactNode;
+}
+
+/**
+ * The floating panel component that appears when the trigger is clicked.
+ * Renders in a portal to avoid z-index and overflow issues.
+ * Supports dragging via the header area.
+ * @param props - Component props
+ * @param props.width - The width of the panel in pixels
+ * @param props.height - Optional height of the panel in pixels (for alignment calculations)
+ * @param props.header - Header configuration for the panel
+ * @param props.children - Content to display in the panel
+ * @param props.anchorRef - Optional ref to anchor element for positioning (defaults to trigger)
+ * @param props.placement - Placement relative to anchor: left, right, top, bottom (default: left)
+ * @param props.alignment - Alignment along placement axis: start, center, end (default: start)
+ * @param props.gap - Gap between panel and anchor in pixels (default: 0 for pixel-perfect alignment)
+ * @param props.actions - Action buttons to display in the header
+ * @returns The PopoutPanel component or null when closed
+ */
+declare function PopoutPanel({ width, height, header, children, anchorRef, placement, alignment, gap, actions, }: PopoutPanelProps): ReactPortal | null;
+
+/**
+ * Props for the PopoutPanel component.
+ */
+export declare interface PopoutPanelProps {
+    /** Width of the panel in pixels */
+    width: number;
+    /** Height of the panel in pixels (optional, for top/bottom placement alignment) */
+    height?: number;
+    /** Header configuration */
+    header: PopoutHeaderConfig;
+    /** Panel content */
+    children?: ReactNode;
+    /**
+     * Optional ref to an anchor element for positioning.
+     * If not provided, the panel positions relative to the trigger.
+     */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**
+     * Placement of the panel relative to the anchor.
+     * @default "left"
+     */
+    placement?: PopoutPlacement;
+    /**
+     * Alignment along the placement axis.
+     * @default "start"
+     */
+    alignment?: PopoutAlignment;
+    /**
+     * Gap between the panel and anchor element in pixels.
+     * Set to 0 for pixel-perfect edge alignment.
+     * @default 0
+     */
+    gap?: number;
+    /**
+     * Action buttons to display in the header.
+     */
+    actions?: PopoutHeaderAction[];
+}
+
+/**
+ * Placement of the popout panel relative to the anchor element.
+ */
+declare type PopoutPlacement = "left" | "right" | "top" | "bottom";
+
+/**
+ * Position for a popout panel relative to its trigger.
+ */
+export declare interface PopoutPosition {
+    /** Left position in pixels */
+    left: number;
+    /** Top position in pixels */
+    top: number;
+}
+
+/**
+ * Props for the Popout compound component.
+ */
+declare interface PopoutProps {
+    /** Child components (Popout.Trigger, Popout.Panel) */
+    children: ReactNode;
+}
+
+/**
+ * Compound component for creating floating pop-out panels.
+ * Follows the Figma-style floating panel pattern.
+ * Automatically detects when nested inside another Popout for hierarchy tracking.
+ *
+ * Usage:
+ * ```tsx
+ * <PopoutManager>
+ * <Popout>
+ * <Popout.Trigger>
+ * <Button>Open</Button>
+ * </Popout.Trigger>
+ * <Popout.Panel width={280} header={{ variant: "title", title: "Settings" }}>
+ * <Popout.Content>
+ * Panel content here
+ * </Popout.Content>
+ * </Popout.Panel>
+ * </Popout>
+ * </PopoutManager>
+ * ```
+ * @param props - Component props
+ * @param props.children - Child components (Popout.Trigger, Popout.Panel)
+ * @returns The Popout compound component
+ */
+declare function PopoutRoot({ children }: PopoutProps): JSX.Element;
+
+/**
+ * Individual tab configuration for tabbed header variant.
+ */
+declare interface PopoutTab {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Label displayed on the tab button */
+    label: string;
+    /** Content to display when this tab is active */
+    content: ReactNode;
+}
+
+/**
+ * Tabbed header configuration.
+ */
+declare interface PopoutTabbedHeaderConfig {
+    /** Header variant - tabs shows a tabbed interface */
+    variant: "tabs";
+    /** Array of tab configurations */
+    tabs: PopoutTab[];
+    /** ID of the default active tab (defaults to first tab) */
+    defaultTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (tabId: string) => void;
+}
+
+/**
+ * Title header configuration.
+ */
+declare interface PopoutTitleHeaderConfig {
+    /** Header variant - title shows a simple text header */
+    variant: "title";
+    /** Title text displayed in the header */
+    title: string;
+}
+
+/**
+ * Wrapper component for the popout trigger element.
+ * Attaches click handler, ref, and ARIA attributes to the child element.
+ * @param props - Component props
+ * @param props.children - The trigger element (typically a button or icon)
+ * @returns The PopoutTrigger component
+ */
+declare function PopoutTrigger({ children }: PopoutTriggerProps): JSX.Element;
+
+/**
+ * Props for the PopoutTrigger component.
+ */
+export declare interface PopoutTriggerProps {
+    /** Trigger element (typically a button or icon) */
+    children: ReactNode;
+}
+
+/**
+ * A label-value pair component for displaying statistics.
+ * Shows the label on the left and value on the right with appropriate styling.
+ * @param root0 - Component props
+ * @param root0.label - Label for the statistic
+ * @param root0.value - Value to display (can be string or number)
+ * @returns The stat row component
+ */
+export declare function StatRow({ label, value }: StatRowProps): default_2.JSX.Element;
+
+/**
+ * Props for StatRow component.
+ */
+export declare interface StatRowProps {
+    /** Label text */
+    label: string;
+    /** Value to display */
+    value: string | number;
+}
+
+/**
+ * A number input that distinguishes between default and explicit values.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * Features:
+ * - Shows muted/italic styling when using default value (value is undefined)
+ * - Shows normal styling when an explicit value is set
+ * - Shows a reset button (x) only when an explicit value is set
+ * - Clicking reset calls onChange(undefined) to revert to default
+ * @param root0 - Component props
+ * @param root0.label - Label for the input
+ * @param root0.value - Current value - undefined means using default (controlled mode)
+ * @param root0.defaultValue - Default value to show when value is undefined
+ * @param root0.onChange - Called when value changes (optional for uncontrolled mode)
+ * @param root0.min - Minimum allowed value
+ * @param root0.max - Maximum allowed value
+ * @param root0.step - Step increment
+ * @param root0.decimalScale - Number of decimal places
+ * @param root0.suffix - Suffix to display
+ * @param root0.hideControls - Whether to hide the spinner controls
+ * @returns The style number input component
+ */
+export declare function StyleNumberInput({ label, value, defaultValue, onChange, min, max, step, decimalScale, suffix, hideControls, }: StyleNumberInputProps): default_2.JSX.Element;
+
+/**
+ * Props for StyleNumberInput component.
+ * Supports both controlled and uncontrolled modes via useUncontrolled pattern.
+ */
+export declare interface StyleNumberInputProps {
+    /** Label for the input (also used for aria-label) */
+    label: string;
+    /** Current value - undefined means using default (controlled mode) */
+    value?: number | undefined;
+    /** Default value to show when value is undefined */
+    defaultValue: number;
+    /** Called when value changes (optional for uncontrolled mode) */
+    onChange?: (value: number | undefined) => void;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Number of decimal places */
+    decimalScale?: number;
+    /** Suffix to display (e.g., "%") */
+    suffix?: string;
+    /** Whether to hide the spinner controls */
+    hideControls?: boolean;
+}
+
+/**
+ * A select input that distinguishes between default and explicit values.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * Features:
+ * - Shows muted styling when using default value (value is undefined)
+ * - Shows normal styling when an explicit value is set
+ * - Shows a reset button (x) only when an explicit value is set
+ * - Clicking reset calls onChange(undefined) to revert to default
+ * @param root0 - Component props
+ * @param root0.label - Label for the select
+ * @param root0.value - Current value - undefined means using default (controlled mode)
+ * @param root0.defaultValue - Default value to show when value is undefined
+ * @param root0.options - Available options
+ * @param root0.onChange - Called when value changes (optional for uncontrolled mode)
+ * @returns The style select component
+ */
+export declare function StyleSelect({ label, value, defaultValue, options, onChange }: StyleSelectProps): default_2.JSX.Element;
+
+/**
+ * Option type for StyleSelect component.
+ */
+export declare interface StyleSelectOption {
+    value: string;
+    label: string;
+}
+
+/**
+ * Props for StyleSelect component.
+ * Supports both controlled and uncontrolled modes via useUncontrolled pattern.
+ */
+export declare interface StyleSelectProps {
+    /** Label for the select (also used for aria-label) */
+    label: string;
+    /** Current value - undefined means using default (controlled mode) */
+    value?: string | undefined;
+    /** Default value to show when value is undefined */
+    defaultValue: string;
+    /** Available options */
+    options: StyleSelectOption[];
+    /** Called when value changes (optional for uncontrolled mode) */
+    onChange?: (value: string | undefined) => void;
+}
+
+/**
+ * Standard color swatches for color pickers throughout the application.
+ * Used by CompactColorInput and GradientEditor.
+ */
+export declare const SWATCH_COLORS: readonly ["#5B8FF9", "#FF6B6B", "#61D095", "#F7B731", "#9B59B6"];
+
+/**
+ * Swatches with alpha channel for HEXA color pickers.
+ * Includes both fully opaque (FF) and semi-transparent (80) variants.
+ */
+export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#61D095FF", "#F7B731FF", "#9B59B6FF", "#5B8FF980", "#FF6B6B80", "#61D09580", "#F7B73180", "#9B59B680"];
+
+/**
+ * Convert RGB hex and opacity to HEXA format.
+ * @param hex - Color in hex format (#RRGGBB)
+ * @param opacity - Opacity percentage (0-100)
+ * @returns Color in HEXA format (#RRGGBBAA)
+ */
+export declare function toHexaColor(hex: string, opacity: number): string;
+
+/**
+ * Hook to get the actual resolved color scheme.
+ * Resolves "auto" to the actual light/dark value based on system preference.
+ * @returns "light" | "dark"
+ */
+export declare function useActualColorScheme(): "light" | "dark";
+
+export declare const VERSION = "0.1.0";
+
+export { }