@leancodepl/styled-tools/index.esm.js

Utilities for styled-components

import { useTheme } from 'styled-components';

function mkProxy(accessor) {
    var cache = {};
    return new Proxy(accessor, {
        get: function get(target, property) {
            var _cache, _property;
            if (property === "prototype") {
                return Function.prototype;
            }
            var _;
            (_ = (_cache = cache)[_property = property]) !== null && _ !== void 0 ? _ : _cache[_property] = mkProxy(function(context) {
                var value = target(context);
                return guard(value) ? value === null || value === void 0 ? void 0 : value[property] : undefined;
            });
            return cache[property];
        }
    });
}
function guard(value) {
    return typeof value === "object";
}

/**
 * Creates type-safe theme utilities for styled-components with full TypeScript support.
 * 
 * @template TTheme - The theme object type extending Value
 * @returns Object containing theme proxy and useTheme hook
 * @example
 * ```typescript
 * interface AppTheme {
 *   colors: { primary: string; secondary: string };
 *   spacing: { small: string; large: string };
 * }
 * 
 * const { theme, useTheme } = mkTheme<AppTheme>();
 * 
 * const Button = styled.button`
 *   color: ${theme.colors.primary};
 *   padding: ${theme.spacing.small};
 * `;
 * ```
 */ function mkTheme() {
    return {
        theme: mkProxy(function(ctx) {
            return ctx.theme;
        }),
        useTheme: function() {
            return useTheme();
        }
    };
}

export { mkTheme };