@reusable-ui/basic/dist/Basic.js

A styled basic building block of Reusable-UI components.

// react:
import { 
// react:
default as React, } from 'react';
// cssfn:
import { 
// style sheets:
dynamicStyleSheet, } from '@cssfn/cssfn-react'; // writes css in react hook
// reusable-ui core:
import { 
// react helper hooks:
useMergeClasses, useResizable, useThemeable, useGradientable, useOutlineable, useMildable, useNudible, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { Generic, } from '@reusable-ui/generic'; // a base component
// styles:
export const useBasicStyleSheet = dynamicStyleSheet(() => import(/* webpackPrefetch: true */ './styles/styles.js'), { id: 'rbkpy0qh2b' }); // a unique salt for SSR support, ensures the server-side & client-side have the same generated class names
const Basic = (props) => {
    // styles:
    const styleSheet = useBasicStyleSheet();
    // variants:
    const resizableVariant = useResizable(props);
    const themeableVariant = useThemeable(props);
    const gradientableVariant = useGradientable(props);
    const outlineableVariant = useOutlineable(props);
    const mildableVariant = useMildable(props);
    const nudibleVariant = useNudible(props);
    // rest props:
    const { 
    // variants:
    size: _size, // remove
    theme: _theme, // remove
    gradient: _gradient, // remove
    outlined: _outlined, // remove
    mild: _mild, // remove
    nude: _nude, // remove
    ...restGenericProps } = props;
    // classes:
    const variantClasses = useMergeClasses(
    // preserves the original `variantClasses`:
    props.variantClasses, 
    // variants:
    resizableVariant.class, themeableVariant.class, gradientableVariant.class, outlineableVariant.class, mildableVariant.class, nudibleVariant.class);
    // jsx:
    return (React.createElement(Generic, { ...restGenericProps, 
        // classes:
        mainClass: props.mainClass ?? styleSheet.main, variantClasses: variantClasses }));
};
export { Basic, Basic as default, };