@onesy/style-react/styled.js

Onesy CSS in JS styling solution for React

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const style_1 = require("@onesy/style");
const _1 = require(".");
const styled = (Element) => (value, options = {}) => {
    var _a;
    // Name
    options.name = options.name !== undefined ? options.name : `${(Element === null || Element === void 0 ? void 0 : Element.displayName) || ((_a = Element === null || Element === void 0 ? void 0 : Element.type) === null || _a === void 0 ? void 0 : _a.displayName) || ''}Styled`;
    // Use styles
    const useStyle = (0, _1.style)(value, options);
    // Element
    const element = react_1.default.forwardRef((props, ref) => {
        const { children, className: classNameProp } = props, other = __rest(props, ["children", "className"]);
        const styles = useStyle(props);
        return ((0, jsx_runtime_1.jsx)(Element, Object.assign({ ref: ref, className: (0, style_1.classNames)([classNameProp, styles.class]) }, other, { children: children })));
    });
    return element;
};
exports.default = styled;