@yme/react-styles

@yme/lay-styles

minital mantine styles api

Example:

import classes from './Card.module.css';

type CardClassNames = 'root' | 'cover' | 'body';

interface CardProps
  extends StylesApiProps<CardFactory>,
    ModProps<CardFactory> {}

type CardFactory = Factory<{
  classNames: CardClassNames;
  props: CardProps;
  ref: HTMLDivElement;
  // data attributes
  mods: {
    disabled?: boolean;
  };
  vars: {
    root: '--card-bg' | '--card-color';
  }
}>

const Card = factory<CardFactory>((
  props,
  ref
) => {
  const {
    className, classNames, style, styels, vars,
    disabled,
    ...others
  } = props;

  // classnames
  const getStyles = useStyles<CardFactory>({
    name: 'Card', classes,
    className, classNames, style, styels, vars,
  });

  const mods = useMod({
    disabled // data-disabled
  });

  return (
    <div {...getStyles('root')} {...mods} {...others} ref={ref}>
      <div {...getStyles('cover')}>
      </div>
      <div {...getStyles('body')}>
      </div>
    </div>
  );
});

How to use:

export function Demo() {
  return (
    <Card
      disabled // mod (data attribute)
      vars={{
        root: {
          // css variable
          '--card-bg': 'red',
          '--card-color': 'blue',
        }
      }}
    />
  );
}