@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.10.ff03a8d

package/dist/styles/sizes.d.ts

@@ -1,78 +0,0 @@
-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

@@ -1,120 +0,0 @@
-/**
- * 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

@@ -1,106 +0,0 @@
-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

@@ -1,194 +0,0 @@
-/**
- * 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

@@ -1,42 +0,0 @@
-/**
- * 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;
-}