stoop 0.3.0 → 0.4.1

package/dist/api/provider.d.ts

@@ -1,19 +0,0 @@
-/**
- * Theme Provider component.
- * Manages theme state, localStorage persistence, and centralized theme variable updates.
- */
-import { type ComponentType, type Context } from "react";
-import type { ProviderProps, Theme, ThemeContextValue, ThemeManagementContextValue } from "../types";
-/**
- * Creates a Provider component for theme management.
- *
- * @param themes - Map of theme names to theme objects
- * @param defaultTheme - Default theme object
- * @param prefix - Optional prefix for CSS variable scoping
- * @returns Provider component, theme context, and theme management context
- */
-export declare function createProvider(themes: Record<string, Theme>, defaultTheme: Theme, prefix?: string): {
-    Provider: ComponentType<ProviderProps>;
-    ThemeContext: Context<ThemeContextValue | null>;
-    ThemeManagementContext: Context<ThemeManagementContextValue | null>;
-};

package/dist/api/provider.js

@@ -1,109 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Theme Provider component.
- * Manages theme state, localStorage persistence, and centralized theme variable updates.
- */
-import { createContext, useCallback, useLayoutEffect, useMemo, useState, } from "react";
-import { updateThemeVariables } from "../core/theme-manager";
-import { isBrowser } from "../utils/environment";
-/**
- * Creates a Provider component for theme management.
- *
- * @param themes - Map of theme names to theme objects
- * @param defaultTheme - Default theme object
- * @param prefix - Optional prefix for CSS variable scoping
- * @returns Provider component, theme context, and theme management context
- */
-export function createProvider(themes, defaultTheme, prefix = "stoop") {
-    const ThemeContext = createContext(null);
-    const ThemeManagementContext = createContext(null);
-    const availableThemeNames = Object.keys(themes);
-    const firstThemeName = availableThemeNames[0] || "default";
-    function Provider({ attribute = "data-theme", children, defaultTheme: defaultThemeProp, storageKey = "stoop-theme", }) {
-        // SSR-safe initialization: always start with default, then hydrate from localStorage
-        const [themeName, setThemeNameState] = useState(() => {
-            // During SSR, always return the default theme
-            if (!isBrowser()) {
-                return defaultThemeProp || firstThemeName;
-            }
-            // On client, try to read from localStorage
-            try {
-                const stored = localStorage.getItem(storageKey);
-                if (stored && themes[stored]) {
-                    return stored;
-                }
-            }
-            catch {
-                // localStorage access failed (e.g., in private browsing mode)
-            }
-            return defaultThemeProp || firstThemeName;
-        });
-        // Hydrate from localStorage after mount to prevent hydration mismatch
-        useLayoutEffect(() => {
-            if (!isBrowser()) {
-                return;
-            }
-            try {
-                const stored = localStorage.getItem(storageKey);
-                if (stored && themes[stored] && stored !== themeName) {
-                    setThemeNameState(stored);
-                }
-            }
-            catch {
-                // localStorage access failed
-            }
-        }, [storageKey, themeName]);
-        const currentTheme = useMemo(() => {
-            return themes[themeName] || themes[defaultThemeProp || firstThemeName] || defaultTheme;
-        }, [themeName, defaultThemeProp, firstThemeName, themes]);
-        useLayoutEffect(() => {
-            if (currentTheme) {
-                updateThemeVariables(currentTheme, prefix);
-            }
-        }, [currentTheme, prefix]);
-        useLayoutEffect(() => {
-            if (isBrowser() && attribute) {
-                document.documentElement.setAttribute(attribute, themeName);
-            }
-        }, [themeName, attribute]);
-        const setTheme = useCallback((newThemeName) => {
-            if (themes[newThemeName]) {
-                setThemeNameState(newThemeName);
-                try {
-                    localStorage.setItem(storageKey, newThemeName);
-                }
-                catch {
-                    // localStorage access failed (e.g., in private browsing mode)
-                }
-            }
-            else if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
-                // eslint-disable-next-line no-console
-                console.warn(`[Stoop] Theme "${newThemeName}" not found. Available themes: ${availableThemeNames.join(", ")}`);
-            }
-        }, [storageKey, themes, availableThemeNames]);
-        const themeContextValue = useMemo(() => ({
-            theme: currentTheme,
-            themeName,
-        }), [currentTheme, themeName]);
-        const toggleTheme = useCallback(() => {
-            const currentIndex = availableThemeNames.indexOf(themeName);
-            const nextIndex = (currentIndex + 1) % availableThemeNames.length;
-            const newTheme = availableThemeNames[nextIndex];
-            setTheme(newTheme);
-        }, [themeName, setTheme]);
-        const managementContextValue = useMemo(() => ({
-            availableThemes: availableThemeNames,
-            setTheme,
-            theme: currentTheme,
-            themeName,
-            toggleTheme,
-        }), [currentTheme, themeName, setTheme, toggleTheme]);
-        return (_jsx(ThemeContext.Provider, { value: themeContextValue, children: _jsx(ThemeManagementContext.Provider, { value: managementContextValue, children: children }) }));
-    }
-    return {
-        Provider,
-        ThemeContext,
-        ThemeManagementContext,
-    };
-}

package/dist/api/styled.js

@@ -1,170 +0,0 @@
-"use client";
-/**
- * Styled component API.
- * Creates polymorphic styled components with variant support, theme awareness,
- * and CSS prop merging. Supports component targeting via selector references.
- */
-import { useMemo, forwardRef, createElement, useContext, createContext, } from "react";
-import { EMPTY_CSS, STOOP_COMPONENT_SYMBOL } from "../constants";
-import { compileCSS } from "../core/compiler";
-import { applyVariants } from "../core/variants";
-import { hash, sanitizeClassName } from "../utils/string";
-let defaultThemeContext = null;
-function getDefaultThemeContext() {
-    if (!defaultThemeContext) {
-        defaultThemeContext = createContext(null);
-    }
-    return defaultThemeContext;
-}
-/**
- * Creates a styled component reference for selector targeting.
- *
- * @param className - Class name to reference
- * @returns StyledComponentRef for use in CSS selectors
- */
-export function createStyledComponentRef(className) {
-    const ref = {
-        __isStoopStyled: true,
-        __stoopClassName: className,
-        [STOOP_COMPONENT_SYMBOL]: className,
-        toString: () => `__STOOP_COMPONENT_${className}`,
-    };
-    return ref;
-}
-/**
- * Type guard for styled component references.
- *
- * @param value - Value to check
- * @returns True if value is a styled component reference
- */
-function isStyledComponent(value) {
-    return (typeof value === "object" &&
-        value !== null &&
-        "__isStoopStyled" in value &&
-        value.__isStoopStyled === true);
-}
-/**
- * Separates component props into variant props and element props.
- * Variant props are used for style variants, element props are passed to the DOM element.
- *
- * @param props - All component props
- * @param variants - Variant configuration
- * @returns Object with separated elementProps and variantProps
- */
-function extractVariantProps(props, variants) {
-    if (!variants) {
-        return { elementProps: props, variantProps: {} };
-    }
-    const variantKeys = new Set(Object.keys(variants));
-    const variantProps = {};
-    const elementProps = {};
-    for (const key in props) {
-        if (variantKeys.has(key)) {
-            variantProps[key] = props[key];
-        }
-        else {
-            elementProps[key] = props[key];
-        }
-    }
-    return { elementProps, variantProps };
-}
-/**
- * Creates a styled component factory function.
- * Supports polymorphic components, variants, theme awareness, and CSS prop merging.
- *
- * @param defaultTheme - Default theme for token resolution
- * @param prefix - Optional prefix for generated class names
- * @param media - Optional media query breakpoints
- * @param utils - Optional utility functions
- * @param themeMap - Optional theme scale mappings
- * @param themeContext - React context for theme values (instance-specific)
- * @returns Styled component factory function
- */
-export function createStyledFunction(defaultTheme, prefix = "stoop", media, utils, themeMap, themeContext) {
-    return function styled(defaultElement, baseStylesOrVariants, variantsParam) {
-        let actualBaseStyles = (baseStylesOrVariants || EMPTY_CSS);
-        let actualVariants = variantsParam;
-        if (baseStylesOrVariants &&
-            "variants" in baseStylesOrVariants &&
-            typeof baseStylesOrVariants.variants === "object") {
-            actualVariants = baseStylesOrVariants.variants;
-            const { compoundVariants: __, variants: _, ...rest } = baseStylesOrVariants;
-            actualBaseStyles = rest;
-        }
-        let baseElementClassName;
-        if (typeof defaultElement !== "string" && isStyledComponent(defaultElement)) {
-            baseElementClassName = defaultElement.__stoopClassName;
-        }
-        const StyledComponent = forwardRef(function StyledComponent(propsWithBase, ref) {
-            const { as, className, css: cssStyles, ...restProps } = propsWithBase;
-            const element = (as || defaultElement);
-            const cssObject = useMemo(() => cssStyles && typeof cssStyles === "object" && cssStyles !== null
-                ? cssStyles
-                : EMPTY_CSS, [cssStyles]);
-            const { elementProps, variantProps } = extractVariantProps(restProps, actualVariants);
-            const contextValue = useContext(themeContext || getDefaultThemeContext());
-            const currentTheme = contextValue?.theme || defaultTheme;
-            const currentMedia = currentTheme.media ? { ...media, ...currentTheme.media } : media;
-            const variantKey = useMemo(() => {
-                if (!actualVariants) {
-                    return "";
-                }
-                const variantEntries = Object.entries(variantProps);
-                if (variantEntries.length === 0) {
-                    return "";
-                }
-                return variantEntries
-                    .sort(([a], [b]) => a.localeCompare(b))
-                    .map(([key, value]) => `${key}:${String(value)}`)
-                    .join("|");
-            }, [variantProps]);
-            const finalStyles = useMemo(() => {
-                let componentStyles = actualBaseStyles;
-                if (actualVariants && variantKey) {
-                    componentStyles = applyVariants(actualVariants, variantProps, actualBaseStyles);
-                }
-                if (cssObject !== EMPTY_CSS) {
-                    componentStyles = Object.assign({}, componentStyles, cssObject);
-                }
-                return componentStyles;
-            }, [variantKey, cssObject, actualBaseStyles, actualVariants, variantProps]);
-            const finalClassName = useMemo(() => {
-                const classNames = [];
-                if (baseElementClassName) {
-                    classNames.push(baseElementClassName);
-                }
-                const mergedClass = compileCSS(finalStyles, currentTheme, prefix, currentMedia, utils, themeMap);
-                if (mergedClass) {
-                    classNames.push(mergedClass);
-                }
-                if (className) {
-                    const classNameStr = typeof className === "string" ? className : String(className);
-                    const sanitizedClassName = sanitizeClassName(classNameStr);
-                    if (sanitizedClassName) {
-                        classNames.push(sanitizedClassName);
-                    }
-                }
-                return classNames.length > 0 ? classNames.join(" ") : undefined;
-            }, [
-                finalStyles,
-                className,
-                baseElementClassName,
-                currentTheme,
-                prefix,
-                currentMedia,
-                utils,
-                themeMap,
-            ]);
-            return createElement(element, {
-                ...elementProps,
-                className: finalClassName,
-                ref,
-            });
-        });
-        const selectorHash = hash(JSON.stringify(actualBaseStyles));
-        const selectorClassName = `${prefix}-${selectorHash}`;
-        const componentWithSelector = StyledComponent;
-        componentWithSelector.selector = createStyledComponentRef(selectorClassName);
-        return componentWithSelector;
-    };
-}

package/dist/api/use-theme.d.ts

@@ -1,13 +0,0 @@
-/**
- * Theme management hook.
- * Provides access to theme state and theme switching functions.
- */
-import { type Context } from "react";
-import type { ThemeManagementContextValue } from "../types";
-/**
- * Creates a useTheme hook for a specific theme management context.
- *
- * @param ThemeManagementContext - React context for theme management
- * @returns Hook function that returns theme management context value
- */
-export declare function createUseThemeHook(ThemeManagementContext: Context<ThemeManagementContextValue | null>): () => ThemeManagementContextValue;

package/dist/api/use-theme.js

@@ -1,21 +0,0 @@
-"use client";
-/**
- * Theme management hook.
- * Provides access to theme state and theme switching functions.
- */
-import { useContext } from "react";
-/**
- * Creates a useTheme hook for a specific theme management context.
- *
- * @param ThemeManagementContext - React context for theme management
- * @returns Hook function that returns theme management context value
- */
-export function createUseThemeHook(ThemeManagementContext) {
-    return function useTheme() {
-        const context = useContext(ThemeManagementContext);
-        if (!context) {
-            throw new Error("useTheme must be used within a Provider");
-        }
-        return context;
-    };
-}

package/dist/constants.js

@@ -1,144 +0,0 @@
-/**
- * Shared constants used throughout the library.
- * Includes cache size limits and nesting depth limits.
- */
-export const EMPTY_CSS = Object.freeze({});
-export const MAX_CSS_CACHE_SIZE = 10000;
-export const MAX_CLASS_NAME_CACHE_SIZE = 5000;
-export const MAX_CSS_NESTING_DEPTH = 10;
-/**
- * Approved theme scales - only these scales are allowed in theme objects.
- */
-export const APPROVED_THEME_SCALES = [
-    "colors",
-    "opacities",
-    "space",
-    "radii",
-    "sizes",
-    "fonts",
-    "fontWeights",
-    "fontSizes",
-    "lineHeights",
-    "letterSpacings",
-    "shadows",
-    "zIndices",
-    "transitions",
-];
-/**
- * Default themeMap mapping CSS properties to theme scales.
- * Covers 150+ common CSS properties for zero-config experience.
- * Missing properties gracefully fallback to pattern-based auto-detection.
- */
-export const DEFAULT_THEME_MAP = {
-    accentColor: "colors",
-    animation: "transitions",
-    animationDelay: "transitions",
-    animationDuration: "transitions",
-    animationTimingFunction: "transitions",
-    backdropFilter: "shadows",
-    background: "colors",
-    backgroundColor: "colors",
-    blockSize: "sizes",
-    border: "colors",
-    borderBlockColor: "colors",
-    borderBlockEndColor: "colors",
-    borderBlockStartColor: "colors",
-    borderBottomColor: "colors",
-    borderBottomLeftRadius: "radii",
-    borderBottomRightRadius: "radii",
-    borderColor: "colors",
-    borderEndEndRadius: "radii",
-    borderEndStartRadius: "radii",
-    borderInlineColor: "colors",
-    borderInlineEndColor: "colors",
-    borderInlineStartColor: "colors",
-    borderLeftColor: "colors",
-    borderRadius: "radii",
-    borderRightColor: "colors",
-    borderStartEndRadius: "radii",
-    borderStartStartRadius: "radii",
-    borderTopColor: "colors",
-    borderTopLeftRadius: "radii",
-    borderTopRightRadius: "radii",
-    bottom: "space",
-    boxShadow: "shadows",
-    caretColor: "colors",
-    color: "colors",
-    columnGap: "space",
-    columnRuleColor: "colors",
-    fill: "colors",
-    filter: "shadows",
-    flexBasis: "sizes",
-    floodColor: "colors",
-    font: "fontSizes",
-    fontFamily: "fonts",
-    fontSize: "fontSizes",
-    fontWeight: "fontWeights",
-    gap: "space",
-    gridColumnGap: "space",
-    gridGap: "space",
-    gridRowGap: "space",
-    height: "sizes",
-    inlineSize: "sizes",
-    inset: "space",
-    insetBlock: "space",
-    insetBlockEnd: "space",
-    insetBlockStart: "space",
-    insetInline: "space",
-    insetInlineEnd: "space",
-    insetInlineStart: "space",
-    left: "space",
-    letterSpacing: "letterSpacings",
-    lightingColor: "colors",
-    lineHeight: "lineHeights",
-    margin: "space",
-    marginBlock: "space",
-    marginBlockEnd: "space",
-    marginBlockStart: "space",
-    marginBottom: "space",
-    marginInline: "space",
-    marginInlineEnd: "space",
-    marginInlineStart: "space",
-    marginLeft: "space",
-    marginRight: "space",
-    marginTop: "space",
-    maxBlockSize: "sizes",
-    maxHeight: "sizes",
-    maxInlineSize: "sizes",
-    maxWidth: "sizes",
-    minBlockSize: "sizes",
-    minHeight: "sizes",
-    minInlineSize: "sizes",
-    minWidth: "sizes",
-    opacity: "opacities",
-    outline: "colors",
-    outlineColor: "colors",
-    padding: "space",
-    paddingBlock: "space",
-    paddingBlockEnd: "space",
-    paddingBlockStart: "space",
-    paddingBottom: "space",
-    paddingInline: "space",
-    paddingInlineEnd: "space",
-    paddingInlineStart: "space",
-    paddingLeft: "space",
-    paddingRight: "space",
-    paddingTop: "space",
-    right: "space",
-    rowGap: "space",
-    size: "sizes",
-    stopColor: "colors",
-    stroke: "colors",
-    textDecorationColor: "colors",
-    textEmphasisColor: "colors",
-    textShadow: "shadows",
-    top: "space",
-    transition: "transitions",
-    transitionDelay: "transitions",
-    transitionDuration: "transitions",
-    transitionProperty: "transitions",
-    transitionTimingFunction: "transitions",
-    width: "sizes",
-    zIndex: "zIndices",
-};
-export const STOOP_COMPONENT_SYMBOL = Symbol.for("stoop.component");

package/dist/core/cache.js

@@ -1,68 +0,0 @@
-/**
- * CSS compilation caching system.
- * Tracks compiled CSS strings and class names to prevent duplicate work.
- * Implements LRU (Least Recently Used) eviction when cache size limits are exceeded.
- */
-import { MAX_CLASS_NAME_CACHE_SIZE, MAX_CSS_CACHE_SIZE } from "../constants";
-/**
- * LRU Cache implementation for class names and CSS strings.
- * Automatically evicts least recently used entries when size limit is exceeded.
- */
-export class LRUCache extends Map {
-    maxSize;
-    constructor(maxSize) {
-        super();
-        this.maxSize = maxSize;
-    }
-    get(key) {
-        const value = super.get(key);
-        if (value !== undefined) {
-            super.delete(key);
-            super.set(key, value);
-        }
-        return value;
-    }
-    set(key, value) {
-        if (super.has(key)) {
-            super.delete(key);
-        }
-        else if (this.size >= this.maxSize) {
-            const firstKey = this.keys().next().value;
-            if (firstKey !== undefined) {
-                super.delete(firstKey);
-            }
-        }
-        super.set(key, value);
-        return this;
-    }
-}
-export const classNameCache = new LRUCache(MAX_CLASS_NAME_CACHE_SIZE);
-export const cssStringCache = new LRUCache(MAX_CSS_CACHE_SIZE);
-// Separate cache for tracking injected CSS strings (used by browser injection)
-const injectedStylesCache = new Set();
-/**
- * Checks if a CSS string has been injected.
- * Uses a Set for O(1) lookup.
- *
- * @param css - CSS string to check
- * @returns True if CSS has been injected
- */
-export function isCachedStyle(css) {
-    return injectedStylesCache.has(css);
-}
-/**
- * Marks a CSS string as injected.
- *
- * @param css - CSS string to cache
- */
-export function markStyleAsCached(css) {
-    injectedStylesCache.add(css);
-}
-/**
- * Clears all cached styles.
- */
-export function clearStyleCache() {
-    classNameCache.clear();
-    cssStringCache.clear();
-    injectedStylesCache.clear();
-}