@spaethtech/svelte-ui 0.1.10

package/dist/components/TooltipHandler/TooltipHandler.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HandlerComponentProps } from '../../types/ManagerTypes.js';
+interface Props extends HandlerComponentProps {
+    /** Container for tooltip positioning bounds. Can be HTMLElement or CSS selector. Default: viewport */
+    container?: HTMLElement | string;
+    /** Named snippets for tooltip content */
+    [key: string]: any;
+}
+declare const TooltipHandler: import("svelte").Component<Props, {}, "">;
+type TooltipHandler = ReturnType<typeof TooltipHandler>;
+export default TooltipHandler;

package/dist/components/TooltipHandler/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TooltipHandler.svelte';

package/dist/components/TooltipHandler/index.js

@@ -0,0 +1 @@
+export { default } from './TooltipHandler.svelte';

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { default as Badge } from "./components/Badge/Badge.svelte";
+export { default as Button } from "./components/Button/Button.svelte";
+export { default as Dialog } from "./components/Dialog/Dialog.svelte";
+export { default as Input } from "./components/Input/Input.svelte";
+export { default as NotesEditor } from "./components/NotesEditor/NotesEditor.svelte";
+export { default as Rating } from "./components/Rating/Rating.svelte";
+export { default as Select } from "./components/Select/Select.svelte";
+export { default as List } from "./components/List/List.svelte";
+export { default as ListView } from "./components/ListView/ListView.svelte";
+export { default as ListItem } from "./components/ListItem/ListItem.svelte";
+export { default as TextArea } from "./components/TextArea/TextArea.svelte";
+export { default as Icon } from "./components/Icon/Icon.svelte";
+export { default as ScrollView } from "./components/ScrollView/ScrollView.svelte";
+export { default as PasswordInput } from "./components/PasswordInput/PasswordInput.svelte";
+export { default as EmailInput } from "./components/EmailInput/EmailInput.svelte";
+export { default as SearchInput } from "./components/SearchInput/SearchInput.svelte";
+export { default as NumberInput } from "./components/NumberInput/NumberInput.svelte";
+export { default as ThemeSelector } from "./components/ThemeSelector/ThemeSelector.svelte";
+export { default as ElementManager } from "./components/ElementManager/ElementManager.svelte";
+export { default as TooltipHandler } from "./components/TooltipHandler/TooltipHandler.svelte";
+export { NodeGraph, Node, NodePort, Edge, NodeDecorator, Input as InputDecorator, Output as OutputDecorator, BaseNode, NodeInstance, ExpressionEvaluator, } from "./components/NodeGraph/index.js";
+export type { PortMode, ControlType, VariableScope, NodeOptions, InputOptions, OutputOptions, PortMetadata, NodeMetadata, Position, } from "./components/NodeGraph/index.js";
+export type { HandlerProps, HandlerComponentProps, ReadOnlyElements, } from "./types/ManagerTypes.js";
+export type { Variant } from "./types/variants.js";

package/dist/index.js

@@ -0,0 +1,26 @@
+// Reexport your entry components here
+export { default as Badge } from "./components/Badge/Badge.svelte";
+export { default as Button } from "./components/Button/Button.svelte";
+export { default as Dialog } from "./components/Dialog/Dialog.svelte";
+export { default as Input } from "./components/Input/Input.svelte";
+export { default as NotesEditor } from "./components/NotesEditor/NotesEditor.svelte";
+export { default as Rating } from "./components/Rating/Rating.svelte";
+export { default as Select } from "./components/Select/Select.svelte";
+export { default as List } from "./components/List/List.svelte";
+export { default as ListView } from "./components/ListView/ListView.svelte";
+export { default as ListItem } from "./components/ListItem/ListItem.svelte";
+export { default as TextArea } from "./components/TextArea/TextArea.svelte";
+export { default as Icon } from "./components/Icon/Icon.svelte";
+export { default as ScrollView } from "./components/ScrollView/ScrollView.svelte";
+// Specialized Input Components
+export { default as PasswordInput } from "./components/PasswordInput/PasswordInput.svelte";
+export { default as EmailInput } from "./components/EmailInput/EmailInput.svelte";
+export { default as SearchInput } from "./components/SearchInput/SearchInput.svelte";
+export { default as NumberInput } from "./components/NumberInput/NumberInput.svelte";
+// Theme Components
+export { default as ThemeSelector } from "./components/ThemeSelector/ThemeSelector.svelte";
+// Utility Components
+export { default as ElementManager } from "./components/ElementManager/ElementManager.svelte";
+export { default as TooltipHandler } from "./components/TooltipHandler/TooltipHandler.svelte";
+// NodeGraph System
+export { NodeGraph, Node, NodePort, Edge, NodeDecorator, Input as InputDecorator, Output as OutputDecorator, BaseNode, NodeInstance, ExpressionEvaluator, } from "./components/NodeGraph/index.js";

package/dist/styles/sizes.d.ts

@@ -0,0 +1,78 @@
+import type { Size } from "../types/sizes.js";
+/**
+ * Component height classes for consistent sizing across the library.
+ * These ensure buttons, inputs, badges, and other form elements align properly.
+ */
+export declare const componentHeights: Record<Size, string>;
+/**
+ * Text size classes corresponding to component sizes.
+ * Ensures text scaling is proportional to component size.
+ */
+export declare const textSizes: Record<Size, string>;
+/**
+ * Horizontal padding classes for components with text content.
+ * Scales padding proportionally with component size.
+ */
+export declare const horizontalPadding: Record<Size, string>;
+/**
+ * Vertical padding classes for components (used less often due to fixed heights).
+ */
+export declare const verticalPadding: Record<Size, string>;
+/**
+ * Combined size classes for button-like components.
+ * Includes height, text size, and padding.
+ *
+ * @example
+ * // In a component
+ * const classes = buttonSizeClasses[size];
+ * // => "h-8 text-sm px-4 py-2"
+ */
+export declare const buttonSizeClasses: Record<Size, string>;
+/**
+ * Combined size classes for badge-like components.
+ * Badges use the same padding as buttons for visual consistency.
+ */
+export declare const badgeSizeClasses: Record<Size, string>;
+/**
+ * Combined size classes for input-like components.
+ * Inputs match button heights but may have different padding needs.
+ */
+export declare const inputSizeClasses: Record<Size, string>;
+/**
+ * Get component height class for a given size.
+ * Useful when you only need the height without padding/text size.
+ *
+ * @param size - The size variant
+ * @returns Tailwind height class (e.g., "h-8")
+ */
+export declare function getComponentHeight(size: Size): string;
+/**
+ * Get text size class for a given component size.
+ *
+ * @param size - The size variant
+ * @returns Tailwind text size class (e.g., "text-sm")
+ */
+export declare function getTextSize(size: Size): string;
+/**
+ * Build custom size classes with specific options.
+ *
+ * @param size - The size variant
+ * @param options - Customization options
+ * @returns Space-separated string of size classes
+ *
+ * @example
+ * // Button with full sizing
+ * getSizeClasses('md', { includeHeight: true, includePadding: true, includeText: true })
+ * // => "h-8 text-sm px-4 py-2"
+ *
+ * @example
+ * // Input with only height and text
+ * getSizeClasses('md', { includeHeight: true, includeText: true })
+ * // => "h-8 text-sm"
+ */
+export declare function getSizeClasses(size: Size, options?: {
+    includeHeight?: boolean;
+    includeText?: boolean;
+    includeHorizontalPadding?: boolean;
+    includeVerticalPadding?: boolean;
+}): string;

package/dist/styles/sizes.js

@@ -0,0 +1,120 @@
+/**
+ * Component height classes for consistent sizing across the library.
+ * These ensure buttons, inputs, badges, and other form elements align properly.
+ */
+export const componentHeights = {
+    sm: "h-7", // 28px
+    md: "h-8", // 32px - default
+    lg: "h-9", // 36px
+};
+/**
+ * Text size classes corresponding to component sizes.
+ * Ensures text scaling is proportional to component size.
+ */
+export const textSizes = {
+    sm: "text-xs", // 12px
+    md: "text-sm", // 14px - default
+    lg: "text-base", // 16px
+};
+/**
+ * Horizontal padding classes for components with text content.
+ * Scales padding proportionally with component size.
+ */
+export const horizontalPadding = {
+    sm: "px-3", // 12px
+    md: "px-4", // 16px - default
+    lg: "px-5", // 20px
+};
+/**
+ * Vertical padding classes for components (used less often due to fixed heights).
+ */
+export const verticalPadding = {
+    sm: "py-1", // 4px
+    md: "py-2", // 8px - default
+    lg: "py-2.5", // 10px
+};
+/**
+ * Combined size classes for button-like components.
+ * Includes height, text size, and padding.
+ *
+ * @example
+ * // In a component
+ * const classes = buttonSizeClasses[size];
+ * // => "h-8 text-sm px-4 py-2"
+ */
+export const buttonSizeClasses = {
+    sm: `${componentHeights.sm} ${textSizes.sm} ${horizontalPadding.sm} ${verticalPadding.sm}`,
+    md: `${componentHeights.md} ${textSizes.md} ${horizontalPadding.md} ${verticalPadding.md}`,
+    lg: `${componentHeights.lg} ${textSizes.lg} ${horizontalPadding.lg} ${verticalPadding.lg}`,
+};
+/**
+ * Combined size classes for badge-like components.
+ * Badges use the same padding as buttons for visual consistency.
+ */
+export const badgeSizeClasses = {
+    sm: `${componentHeights.sm} ${textSizes.sm} ${horizontalPadding.sm}`,
+    md: `${componentHeights.md} ${textSizes.md} ${horizontalPadding.md}`,
+    lg: `${componentHeights.lg} ${textSizes.lg} ${horizontalPadding.lg}`,
+};
+/**
+ * Combined size classes for input-like components.
+ * Inputs match button heights but may have different padding needs.
+ */
+export const inputSizeClasses = {
+    sm: `${componentHeights.sm} ${textSizes.sm}`,
+    md: `${componentHeights.md} ${textSizes.md}`,
+    lg: `${componentHeights.lg} ${textSizes.lg}`,
+};
+/**
+ * Get component height class for a given size.
+ * Useful when you only need the height without padding/text size.
+ *
+ * @param size - The size variant
+ * @returns Tailwind height class (e.g., "h-8")
+ */
+export function getComponentHeight(size) {
+    return componentHeights[size];
+}
+/**
+ * Get text size class for a given component size.
+ *
+ * @param size - The size variant
+ * @returns Tailwind text size class (e.g., "text-sm")
+ */
+export function getTextSize(size) {
+    return textSizes[size];
+}
+/**
+ * Build custom size classes with specific options.
+ *
+ * @param size - The size variant
+ * @param options - Customization options
+ * @returns Space-separated string of size classes
+ *
+ * @example
+ * // Button with full sizing
+ * getSizeClasses('md', { includeHeight: true, includePadding: true, includeText: true })
+ * // => "h-8 text-sm px-4 py-2"
+ *
+ * @example
+ * // Input with only height and text
+ * getSizeClasses('md', { includeHeight: true, includeText: true })
+ * // => "h-8 text-sm"
+ */
+export function getSizeClasses(size, options = {}) {
+    const { includeHeight = true, includeText = true, includeHorizontalPadding = false, includeVerticalPadding = false, } = options;
+    const classes = [];
+    if (includeHeight) {
+        classes.push(componentHeights[size]);
+    }
+    if (includeText) {
+        classes.push(textSizes[size]);
+    }
+    if (includeHorizontalPadding) {
+        classes.push(horizontalPadding[size]);
+    }
+    if (includeVerticalPadding) {
+        classes.push(verticalPadding[size]);
+    }
+    return classes.join(" ");
+}

package/dist/styles/variants.d.ts

@@ -0,0 +1,106 @@
+import type { Variant } from "../types/variants.js";
+/**
+ * Structured variant style properties for consistent styling across components.
+ * These use CSS variables for theming, allowing users to customize colors via CSS.
+ */
+export interface VariantStyles {
+    /** Background color */
+    bg: string;
+    /** Background color on hover */
+    bgHover: string;
+    /** Background color in active/pressed/checked state */
+    bgActive: string;
+    /** Border color */
+    border: string;
+    /** Border color on hover */
+    borderHover: string;
+    /** Border color in active/pressed/checked state */
+    borderActive: string;
+    /** Text color */
+    text: string;
+    /** Icon/SVG fill color */
+    icon: string;
+    /** Optical centering adjustment for text (e.g., '-mt-px' for warm colors) */
+    textAdjustment: string;
+    /** Optical centering adjustment for icons (e.g., '-mb-px' to shift down) */
+    iconAdjustment: string;
+}
+/**
+ * Variant style definitions for all standard variants.
+ * Uses CSS variables (--color-*) for theme-aware styling.
+ * Users customize by overriding CSS variables, not these definitions.
+ */
+export declare const variantStyles: Record<Variant, VariantStyles>;
+/**
+ * Options for customizing which variant styles to include
+ */
+export interface VariantClassOptions {
+    /** Include hover state styles (default: true) */
+    includeHover?: boolean;
+    /** Include active/pressed/checked state styles (default: false) */
+    includeActive?: boolean;
+    /** Include border styles (default: true) */
+    includeBorder?: boolean;
+    /** Include text color styles (default: true) */
+    includeText?: boolean;
+    /** Include icon/SVG styles (default: true) */
+    includeIcon?: boolean;
+}
+/**
+ * Get variant classes as a single space-separated string.
+ * Combines background, border, text, and hover states based on options.
+ *
+ * @param variant - The variant to get classes for
+ * @param options - Options to customize which styles to include
+ * @returns Space-separated string of Tailwind classes
+ *
+ * @example
+ * // Button with full styles
+ * getVariantClasses('primary')
+ * // => "[background-color:var(--color-primary)] text-white [border-color:var(--color-primary)] hover:[background-color:...] hover:[border-color:...] [&_svg]:fill-current"
+ *
+ * @example
+ * // Input with only border styles
+ * getVariantClasses('secondary', { includeBorder: true, includeText: false, includeIcon: false })
+ * // => "[border-color:var(--color-secondary)] hover:[border-color:...]"
+ */
+export declare function getVariantClasses(variant: Variant, options?: VariantClassOptions): string;
+/**
+ * Get active/pressed/checked state classes for a variant.
+ * Useful for toggle buttons, checkboxes styled as buttons, etc.
+ *
+ * @param variant - The variant to get active classes for
+ * @returns Space-separated string of Tailwind classes for active state
+ *
+ * @example
+ * // CheckButton checked state
+ * const classes = checked ? getVariantActiveClasses('primary') : getVariantClasses('primary');
+ */
+export declare function getVariantActiveClasses(variant: Variant): string;
+/**
+ * Get only border-related classes for a variant.
+ * Useful for input components that need variant-styled borders.
+ *
+ * @param variant - The variant to get border classes for
+ * @param includeHover - Include hover state (default: true)
+ * @returns Space-separated string of border-related Tailwind classes
+ *
+ * @example
+ * // Input with variant border
+ * getVariantBorderClasses('primary')
+ * // => "[border-color:var(--color-primary)] hover:[border-color:color-mix(...)]"
+ */
+export declare function getVariantBorderClasses(variant: Variant, includeHover?: boolean): string;
+/**
+ * Get raw variant styles object for custom manipulation.
+ * Use when helper functions don't provide enough flexibility.
+ *
+ * @param variant - The variant to get styles for
+ * @returns VariantStyles object with individual style properties
+ *
+ * @example
+ * // Custom combination
+ * const styles = getVariantStyles('primary');
+ * const customClasses = `${styles.bg} ${styles.text} custom-hover-class`;
+ */
+export declare function getVariantStyles(variant: Variant): VariantStyles;

package/dist/styles/variants.js

@@ -0,0 +1,194 @@
+/**
+ * Variant style definitions for all standard variants.
+ * Uses CSS variables (--color-*) for theme-aware styling.
+ * Users customize by overriding CSS variables, not these definitions.
+ */
+export const variantStyles = {
+    primary: {
+        bg: "[background-color:var(--color-primary)]",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-primary)_90%,black)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-primary)_85%,black)]",
+        border: "[border-color:var(--color-primary)]",
+        borderHover: "[border-color:color-mix(in_srgb,var(--color-primary)_90%,black)]",
+        borderActive: "[border-color:color-mix(in_srgb,var(--color-primary)_85%,black)]",
+        text: "text-white",
+        icon: "fill-current",
+        textAdjustment: "",
+        iconAdjustment: "-mb-[2px]",
+    },
+    secondary: {
+        bg: "[background-color:var(--color-secondary)]",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-secondary)_90%,black)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-secondary)_85%,black)]",
+        border: "[border-color:var(--color-secondary)]",
+        borderHover: "[border-color:color-mix(in_srgb,var(--color-secondary)_90%,black)]",
+        borderActive: "[border-color:color-mix(in_srgb,var(--color-secondary)_85%,black)]",
+        text: "text-white",
+        icon: "fill-current",
+        textAdjustment: "-mt-px",
+        iconAdjustment: "",
+    },
+    danger: {
+        bg: "[background-color:var(--color-danger)]",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-danger)_90%,black)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-danger)_85%,black)]",
+        border: "[border-color:var(--color-danger)]",
+        borderHover: "[border-color:color-mix(in_srgb,var(--color-danger)_90%,black)]",
+        borderActive: "[border-color:color-mix(in_srgb,var(--color-danger)_85%,black)]",
+        text: "text-white",
+        icon: "fill-current",
+        textAdjustment: "-mt-[2px]",
+        iconAdjustment: "",
+    },
+    info: {
+        bg: "[background-color:var(--color-info)]",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-info)_90%,black)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-info)_85%,black)]",
+        border: "[border-color:var(--color-info)]",
+        borderHover: "[border-color:color-mix(in_srgb,var(--color-info)_90%,black)]",
+        borderActive: "[border-color:color-mix(in_srgb,var(--color-info)_85%,black)]",
+        text: "text-white",
+        icon: "fill-current",
+        textAdjustment: "-mt-px",
+        iconAdjustment: "",
+    },
+    success: {
+        bg: "[background-color:var(--color-success)]",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-success)_90%,black)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-success)_85%,black)]",
+        border: "[border-color:var(--color-success)]",
+        borderHover: "[border-color:color-mix(in_srgb,var(--color-success)_90%,black)]",
+        borderActive: "[border-color:color-mix(in_srgb,var(--color-success)_85%,black)]",
+        text: "text-white",
+        icon: "fill-current",
+        textAdjustment: "-mt-px",
+        iconAdjustment: "",
+    },
+    warning: {
+        bg: "[background-color:var(--color-warning)]",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-warning)_90%,black)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-warning)_85%,black)]",
+        border: "[border-color:var(--color-warning)]",
+        borderHover: "[border-color:color-mix(in_srgb,var(--color-warning)_90%,black)]",
+        borderActive: "[border-color:color-mix(in_srgb,var(--color-warning)_85%,black)]",
+        text: "text-white",
+        icon: "fill-current",
+        textAdjustment: "-mt-[2px]",
+        iconAdjustment: "-mt-px",
+    },
+    ghost: {
+        bg: "bg-transparent",
+        bgHover: "[background-color:color-mix(in_srgb,var(--color-text)_10%,transparent)]",
+        bgActive: "[background-color:color-mix(in_srgb,var(--color-text)_15%,transparent)]",
+        border: "",
+        borderHover: "",
+        borderActive: "",
+        text: "[color:var(--color-text)]",
+        icon: "fill-current",
+        textAdjustment: "-mt-px",
+        iconAdjustment: "",
+    },
+};
+/**
+ * Get variant classes as a single space-separated string.
+ * Combines background, border, text, and hover states based on options.
+ *
+ * @param variant - The variant to get classes for
+ * @param options - Options to customize which styles to include
+ * @returns Space-separated string of Tailwind classes
+ *
+ * @example
+ * // Button with full styles
+ * getVariantClasses('primary')
+ * // => "[background-color:var(--color-primary)] text-white [border-color:var(--color-primary)] hover:[background-color:...] hover:[border-color:...] [&_svg]:fill-current"
+ *
+ * @example
+ * // Input with only border styles
+ * getVariantClasses('secondary', { includeBorder: true, includeText: false, includeIcon: false })
+ * // => "[border-color:var(--color-secondary)] hover:[border-color:...]"
+ */
+export function getVariantClasses(variant, options = {}) {
+    const { includeHover = true, includeActive = false, includeBorder = true, includeText = true, includeIcon = true, } = options;
+    const styles = variantStyles[variant];
+    const classes = [];
+    // Base background
+    classes.push(styles.bg);
+    // Text color
+    if (includeText) {
+        classes.push(styles.text);
+    }
+    // Border
+    if (includeBorder) {
+        classes.push(styles.border);
+    }
+    // Icon/SVG
+    if (includeIcon) {
+        classes.push(`[&_svg]:${styles.icon}`);
+    }
+    // Hover states
+    if (includeHover) {
+        classes.push(`hover:${styles.bgHover}`);
+        if (includeBorder) {
+            classes.push(`hover:${styles.borderHover}`);
+        }
+    }
+    // Active states (for pressed/checked components)
+    if (includeActive) {
+        classes.push(styles.bgActive);
+        if (includeBorder) {
+            classes.push(styles.borderActive);
+        }
+    }
+    return classes.join(" ");
+}
+/**
+ * Get active/pressed/checked state classes for a variant.
+ * Useful for toggle buttons, checkboxes styled as buttons, etc.
+ *
+ * @param variant - The variant to get active classes for
+ * @returns Space-separated string of Tailwind classes for active state
+ *
+ * @example
+ * // CheckButton checked state
+ * const classes = checked ? getVariantActiveClasses('primary') : getVariantClasses('primary');
+ */
+export function getVariantActiveClasses(variant) {
+    const styles = variantStyles[variant];
+    return `${styles.bgActive} ${styles.borderActive} ${styles.text} [&_svg]:${styles.icon}`;
+}
+/**
+ * Get only border-related classes for a variant.
+ * Useful for input components that need variant-styled borders.
+ *
+ * @param variant - The variant to get border classes for
+ * @param includeHover - Include hover state (default: true)
+ * @returns Space-separated string of border-related Tailwind classes
+ *
+ * @example
+ * // Input with variant border
+ * getVariantBorderClasses('primary')
+ * // => "[border-color:var(--color-primary)] hover:[border-color:color-mix(...)]"
+ */
+export function getVariantBorderClasses(variant, includeHover = true) {
+    const styles = variantStyles[variant];
+    const classes = [styles.border];
+    if (includeHover) {
+        classes.push(`hover:${styles.borderHover}`);
+    }
+    return classes.join(" ");
+}
+/**
+ * Get raw variant styles object for custom manipulation.
+ * Use when helper functions don't provide enough flexibility.
+ *
+ * @param variant - The variant to get styles for
+ * @returns VariantStyles object with individual style properties
+ *
+ * @example
+ * // Custom combination
+ * const styles = getVariantStyles('primary');
+ * const customClasses = `${styles.bg} ${styles.text} custom-hover-class`;
+ */
+export function getVariantStyles(variant) {
+    return variantStyles[variant];
+}

package/dist/types/ManagerTypes.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Base interface that all handler components must implement
+ * Enforces read-only elements pattern
+ *
+ * ⚠️  IMPORTANT: elements prop must NOT use $bindable()
+ * Handlers should manage their own internal state
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import type { HandlerComponentProps } from 'svelte-ui';
+ *
+ *   interface Props extends HandlerComponentProps {
+ *     myCustomProp?: string;
+ *   }
+ *
+ *   // ✅ Correct: read-only elements
+ *   let { elements = new Map(), children, ...rest }: Props = $props();
+ *
+ *   // ❌ Wrong: DO NOT do this
+ *   // let { elements = $bindable(new Map()) }: Props = $props();
+ * </script>
+ * ```
+ */
+export interface HandlerProps {
+    /** Read-only elements Map from ElementManager - DO NOT use $bindable() */
+    elements: Map<HTMLElement, any>;
+    /** Optional child content */
+    children?: import('svelte').Snippet;
+}
+/**
+ * Type guard to ensure elements prop is not bindable
+ * This creates a compile-time error if someone tries to use $bindable
+ */
+export type ReadOnlyElements<T extends Map<HTMLElement, any>> = T;
+/**
+ * Utility type for handler components
+ * Usage: let { elements, ...rest }: HandlerComponentProps = $props();
+ */
+export interface HandlerComponentProps extends HandlerProps {
+    [key: string]: any;
+}

package/dist/types/ManagerTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/types/sizes.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Standard size variants used across UI components.
+ * Ensures consistent heights and spacing throughout the library.
+ */
+export type Size = 'sm' | 'md' | 'lg';

package/dist/types/sizes.js

@@ -0,0 +1 @@
+export {};

package/dist/types/variants.d.ts

@@ -0,0 +1 @@
+export type Variant = 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning' | 'ghost';

package/dist/types/variants.js

@@ -0,0 +1 @@
+export {};